Warning: Only plain objects can be passed to Client Components from Server Components.

👿 error

Warning: Only plain objects can be passed to Client Components from Server Components.

import EditForm from "@/components/EditForm";
import { connectToDatabase } from "@/utils/database";
import { ObjectId } from "mongodb";

export default async function EditPage({ params }) {
  const { postCollection } = await connectToDatabase();
  let editData = await postCollection.findOne({ _id: new ObjectId(params.id) });


  return <EditForm editData={editData} />;
}

클라이언트 컴포넌트에 plain object가 아닌 객체(예: ObjectId 객체)를 전달하려고 했기 때문에 발생

✨ 해결

MongoDB에서 가져온 데이터를 클라이언트 컴포넌트로 전달하기 전에 _id 값을 문자열로 변환!

 const editData = { ...data, _id: data._id.toString() };

toString() 메서드를 통해 _id 필드가 문자열이 되어 클라이언트 컴포넌트로 안전하게 전달될 수 있다.