MongoDB与Next.js数据序列化问题求助：加载数据时遭遇SerializableError

我尝试将MongoDB中的数据加载到Next.js中，但持续收到以下错误：

SerializableError: Error serializing .jobs[0] returned from getServerSideProps in "/". Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

该数据是通过Python的pymongo存入数据库的。我的实现函数如下：

export async function getServerSideProps(context) {
  const { db } = await connectToDatabase();
  const data = await db
    .collection("alljobs")
    .find()
    .sort({ _id: 1 })
    .limit(40)
    .toArray();
  const jobs = data.map((job) => {
    const company = JSON.parse(JSON.stringify(job.company));
    const impact = JSON.parse(JSON.stringify(job.impact));
    const date = JSON.parse(JSON.stringify(job.date));
    const role = JSON.parse(JSON.stringify(job.role));
    const location = JSON.parse(JSON.stringify(job.location));
    const category = JSON.parse(JSON.stringify(job.category));
    const link = JSON.parse(JSON.stringify(job.link));
    return;
    {
      company: company;
      impact: impact;
      date: date;
      role: role;
      location: location;
      category: category;
      link: link;
    }
  });
  return {
    props: { jobs },
  };
}

我已尝试对所有字段进行序列化处理，但仍无法解决问题，请问有人能提供一些解决思路吗？

这个问题的核心原因很容易被忽略——你的map函数里return语句后面多了一个换行，导致你想返回的对象被当成了一个独立的代码块，实际函数返回的是undefined。当Next.js尝试序列化jobs数组时，里面全是undefined，就触发了这个序列化错误。

1. 修复return语句的语法问题 #

把return和对象放在同一行，或者给对象加上括号，让JavaScript识别出这是要返回的表达式：

const jobs = data.map((job) => {
  const company = JSON.parse(JSON.stringify(job.company));
  const impact = JSON.parse(JSON.stringify(job.impact));
  const date = JSON.parse(JSON.stringify(job.date));
  const role = JSON.parse(JSON.stringify(job.role));
  const location = JSON.parse(JSON.stringify(job.location));
  const category = JSON.parse(JSON.stringify(job.category));
  const link = JSON.parse(JSON.stringify(job.link));
  // 方法1：return和对象在同一行
  return {
    company: company,
    impact: impact,
    date: date,
    role: role,
    location: location,
    category: category,
    link: link,
  };
  // 或者方法2：用括号包裹对象（更简洁的写法）
  // return ({
  //   company, impact, date, role, location, category, link
  // });
});

2. 优化序列化逻辑（可选但推荐） #

你现在用JSON.parse(JSON.stringify(...))的方式序列化字段其实没必要，而且如果MongoDB文档里包含_id（ObjectId类型）或者其他不可序列化的类型，这种方式也处理不好。可以直接在查询时排除_id，或者手动转换ObjectId为字符串：

const data = await db
  .collection("alljobs")
  .find({}, { projection: { _id: 0 } }) // 直接排除_id字段，避免序列化问题
  .sort({ _id: 1 })
  .limit(40)
  .toArray();

// 简化map逻辑，同时处理可能的undefined为null
const jobs = data.map(({ company, impact, date, role, location, category, link }) => ({
  company: company ?? null,
  impact: impact ?? null,
  date: date ?? null,
  role: role ?? null,
  location: location ?? null,
  category: category ?? null,
  link: link ?? null,
}));

3. 排查字段是否存在undefined #

如果某些字段在MongoDB文档里本身就是缺失的（即值为undefined），可以用??操作符将其替换为null，这样JSON就能正常序列化了——这也是上面代码里做的处理。

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