Next.js 15.2.0 App Router：Server传Mongoose数据至Client报Plain Objects错误

使用Next.js 15.2.0 App Router时，通过Server Component从MongoDB获取Property文档并传递给Client Component，终端持续报错：

Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props. {{_id: {buffer: ...}}

Server组件代码 #

interface PropertyPageProps {
  params: { id: string };
}

export default async function PropertyPage({ params }: PropertyPageProps) {
  const { id } = params;

  // Fetch the property from MongoDB using Mongoose
  const dbProperty = await PropertyModel.findById(id)

  if (!dbProperty) {
    return <div>Property not found.</div>;
  }

  return (
    <main>
      <h1>Property Page</h1>
      <PropertyDetailsClient property={dbProperty} />
    </main>
  );
}

Client组件代码 #

'use client';

interface PropertyDetailsClientProps {
  property: {
    _id: string; 
    // ... other properties ...
  };
}

export default function PropertyDetailsClient({ property }: PropertyDetailsClientProps) {
  return (
    <div className="property-details">
      <h2>{property.name}</h2>
      <p>ID: {property._id}</p>
      <p>Created At: {new Date(property.createdAt).toLocaleDateString()}</p>
    </div>
  );
}

问题原因 #

直接传递Mongoose返回的文档对象给Client Component是错误操作。Mongoose文档不是纯JavaScript对象，它包含toJSON等内置方法和内部属性（比如_id是ObjectId类型而非字符串），Next.js禁止将这类非纯对象从Server组件传递到Client组件。

解决方法 #

方法1：将Mongoose文档转为纯对象

在传递前调用.toObject()或.toJSON()方法，把文档转换为纯JS对象：

// 在Server组件中修改数据处理逻辑
const property = dbProperty.toObject();
// 若需要将ObjectId转为字符串，可手动处理
const property = {
  ...dbProperty.toObject(),
  _id: dbProperty._id.toString(),
  createdAt: dbProperty.createdAt.toISOString() // 提前转成字符串，避免Client端日期处理问题
};

// 传递给Client组件
<PropertyDetailsClient property={property} />

方法2：仅传递Client组件需要的字段

不传递整个文档，只提取所需属性，既符合规则又更高效：

// 在Server组件中提取必要字段
const property = {
  _id: dbProperty._id.toString(),
  name: dbProperty.name,
  createdAt: dbProperty.createdAt.toISOString(),
  // 其他Client组件需要的字段...
};

// 传递给Client组件
<PropertyDetailsClient property={property} />

以上两种方法都能让传递的props成为纯JavaScript对象，符合Next.js Server/Client组件的数据传递规则，彻底消除错误提示。

内容的提问来源于stack exchange，提问作者user30928748