Next.js 13服务端组件从MongoDB取数时出现大量警告求助

问题场景 #

我正在使用Next.js和MongoDB（基于Mongoose），Server Component代码如下：

import { getPosts } from "@/lib/mongoDb/post";
import PostsClientComponent from "./PostsClientComponent";

const fetchPosts = async () => {
  let posts = await getPosts();
  return posts;
};

export default async function Page() {
  const posts = await fetchPosts();
 
  return (
    <PostsClientComponent posts={posts} />
  );
}

getPosts()函数代码：

export async function getPosts(){
  dbConnect()
  try {
    let posts = await Post.find();
    return posts
  }
  catch(err){
    console.log(err.message)
    return false;
  }
}

开发环境运行后出现大量序列化相关警告，需要解决。

问题原因 #

Mongoose的find()方法返回的是Mongoose Document对象实例，这类对象包含了Mongoose内部的方法（如save()、populate()）和额外的内部属性，并非纯JSON结构。当Next.js Server Component将这类对象传递给Client Component时，序列化过程会因为非可序列化内容触发警告。

解决方案 #

方案1：使用.lean()获取纯JSON数据（推荐） #

修改getPosts()函数，在find()后添加.lean()，让Mongoose直接返回普通JavaScript对象，避免携带Mongoose的额外属性和方法：

export async function getPosts(){
  await dbConnect() // 必须加await，确保数据库连接就绪
  try {
    let posts = await Post.find().lean();
    return posts
  }
  catch(err){
    console.log(err.message)
    return []; // 返回空数组比false更易处理
  }
}

方案2：手动转换为纯对象 #

如果需要保留Mongoose文档的部分特性，可使用toObject()将每个文档转换为纯对象：

export async function getPosts(){
  await dbConnect()
  try {
    let posts = await Post.find();
    return posts.map(post => post.toObject());
  }
  catch(err){
    console.log(err.message)
    return [];
  }
}

方案3：Server Component内强制序列化 #

在Server Component中通过JSON序列化再解析，确保传递的是纯JSON结构：

export default async function Page() {
  const posts = await fetchPosts();
  const serializablePosts = JSON.parse(JSON.stringify(posts));
 
  return (
    <PostsClientComponent posts={serializablePosts} />
  );
}

注：此方法有额外序列化开销，仅作为备选方案

额外注意事项 #

• 必须确保dbConnect()是异步函数并被await，否则数据库连接未就绪就执行查询，可能引发错误或序列化问题。
• 错误处理中返回空数组（[]）比false更友好，Client Component可统一处理空数据场景。

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