[Next js] Cannot read property 'default' of null

오류메세지)

• TypeError: Cannot read properties of null (reading 'default')

<AddPhotoBtn setImgSrc={setImgSrc} AlbumAddMutation={AlbumAddMutation} />
          {albumListData?.map((item, index) => (
            <li key={item.id} className="h-[200px] overflow-hidden border border-black">
                <Image src={item.photoImg} alt="" width={200} height={150} priority className="h-full" />
            </li>
          ))}

원인)
전체앨범리스트에서 photoImg의 src값이 null/undefined이 있기때문에
src가 유효한 이미지로 정의되지않았던것이다.(빈 문자열도 작동)

-> 데이터 테스트를 한다고 이미지추가구현과 동시에 하다보니 null값이 하나 들어가있었다....

해결방법)
{item.photoImg && (이미지태그)}
1. 이미지url이 있을경우만 유효성처리해주기
2. 데이터 테이블에 값 추가할때 이미지Url null값 안들어가게 유효성처리추가하기

수정코드)

<AddPhotoBtn setImgSrc={setImgSrc} AlbumAddMutation={AlbumAddMutation} />
          {albumListData?.map((item, index) => (
            <li key={item.id} className="h-[200px] overflow-hidden border border-black">
              {item.photoImg && (
                <Image src={item.photoImg} alt="" width={200} height={150} priority className="h-full" />
              )}
            </li>
          ))}

레퍼런스
이미지 입력받기
이미지 트러블슈팅1
이미지 트러블슈팅2