`object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types. //

파이어베이스에서 유저가 클릭한 특정 게시물만(게시물 id로) 조회해오고 싶었는데

넥스트를 쓰면서 새로운 에러를 만났다

 

[에러문구]

`object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.

 

이잉 모라는거야 닥쳥 ㅠ

 

* Serialization은 개체를 저장하거나 메모리, 데이터베이스 또는 파일로 전송하기 위해 개체를 바이트 스트림으로 변환하는 프로세스

(= 직렬화) 라고 한다넹

 

 

[ 이건 내가 수정하기전 작성한 코드 ]

export async function getServerSideProps(context) {
  const { params } = context;
  const { id } = params;
  const targetId = id;
  let targetWholeData;
  const snap = await getDoc(doc(dbService, "communityPost", targetId));
  if (snap.exists()) {
    console.log(snap.data());
    targetWholeData = snap.data();
  } else {
    console.log("No such document");
  }
  return {
    props: {
      targetWholeData,
    },
  };
}

사건의 전말ㅋ : 

파베 함수 getDoc으로 가져온 데이터를 data()를 통해 읽을 수 있는 넘으로 가져왔고 걔를 props로 바로 넘겨주려 하니 에러가 났음

 

 

 

 

친절한 에러메세지는 return을 줄때 시리얼라이저블 할수있는 데이터 타입을 주라고 말을 해줬고 폭풍 검색에 들어갔다.

 

 

문제 원인

Next.js를 사용할때 내가 getServerSidrProps나 getStaticProps를 사용하여 데이터를 패치할때는

반드시 JSON-serializable한 타입으로 데이터를 넘겨주어야 한다고 한다.

 

문제 해결

결론적으로  writtenDate에 있는 저 넘이 문제였고, ( 에러메세지의 "[object Object]" 부분 보면 알 수 있음 )

난 저 옵줵 넘을 string으로 바꿔주는 작업을 해주어야 했다. 

{
title: '상세 페이지 작업듕',
editorText: '<p>안뇽 난 에디터 텍스트양</p>',
writtenDate: Timestamp { seconds: 1676120588, nanoseconds: 596000000 }
}

 

[ 그렇게 해결법을 구글링해서 수정한 코드 ]

  targetWholeData = JSON.parse(JSON.stringify(targetWholeData));

 

코드 수정한 후에 보면

뾰로롱~~

이렇게 props로 잘 넘어와있는 데이터들을 확인할 수 있다 ㅇ_<

 

역시 프로젝트 하면서 부딪혀야 하는 것 같다...

코드짜러 가야징....에러일지 끝 ㅇㅅㅇ