Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

👿 error

Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

• mongo DB 데이터를 불러오고 map함수 적용하는 과정에서 위와 같은 에러가 발생하였다.

    const commentsData = await commentsCollection
   .find({
     document: new ObjectId(params.id),
   });

이 오류는 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 데이터가 Next.js에서 요구하는 형식을 따르지 않을 때 발생.
서버 컴포넌트에서 클라이언트 컴포넌트로 MongoDB 객체 같은 비평문 객체(non-plain object)를 직접 전달할 때 발생.
(commentsData : MongoDB 쿼리에서 반환된 Cursor 객체)
이를 배열로 변환하기 위해서는 toArray() 메소드를 사용해야 한다.

✨ 해결

 const commentsData = await commentsCollection
    .find({
      document: new ObjectId(params.id),
    })
    .toArray();

.toArray()붙여주니 해결되었다.

떠올려보니 기존 objectId를 prop으로 넘겨줄 때에도 유사한 에러메시지를 확인했었다...!!
Warning: Only plain objects can be passed to Client Components from Server Components.

앞으로도 꼼꼼히 기록해둬야징..