Next.js getServerSideProps取数据库数据后JSON解析报错

错误原因 #

1. 你在getServerSideProps里把数据库查询返回的数组用JSON.stringify(data)转成了字符串，导致组件中props.members是字符串类型，而非对象/数组，自然没有data属性。
2. 之前通过API获取数据时，返回的是带data字段的结构，但直接查询MongoDB返回的是纯数组，不需要额外序列化，也没有外层data包裹。

修复方案 #

方案一：直接传递数据库查询结果（更简洁） #

修改getServerSideProps中的代码，去掉JSON.stringify，直接把数组作为members传递：

import { getSession } from 'next-auth/react'; // 补充导入getSession
import UploadFiles from "../../components/upload/upload";
import MemberUpdate from "../../components/members/memberUpdate";
import MemberNew from "../../components/members/memberNew";
import Documents from "../../components/documents/documents";
import classes from "../../styles/member.module.css";
import {connectDatabase} from '../../helpers/db-util';

// ... 组件代码不变

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  const client = await connectDatabase();
  const collection = client.db().collection('members');
  const data = await collection.find({}).toArray();
  // 移除JSON.stringify这行代码

  if (!session) {
    return {
      redirect: {
        destination: "/login",
        permanent: false,
      },
    };
  }

  return { props: { session, members: data } };
}

然后修改组件中的查找逻辑，直接对props.members调用find：

function Members(props) {
  const member = props.members.find(
    (element) => element.memberId === props.session.user.name
  ); 
  // ... 其余代码不变
}

方案二：保持类似API的data结构（无需修改组件代码） #

如果你想保留组件中props.members.data的写法，只需在返回props时给数组套上data字段，同时去掉JSON.stringify：

import { getSession } from 'next-auth/react'; // 补充导入getSession

// ... 组件代码不变

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  const client = await connectDatabase();
  const collection = client.db().collection('members');
  const data = await collection.find({}).toArray();

  if (!session) {
    return {
      redirect: {
        destination: "/login",
        permanent: false,
      },
    };
  }

  // 把数组放到data字段里传递
  return { props: { session, members: { data } } };
}

这种情况下，组件中的代码不需要修改，props.members.data就能正确访问到数组。

额外注意 #

• 必须导入getSession，否则会出现getSession is not defined的错误。
• MongoDB的find({}).toArray()返回纯数组，Next.js会自动处理props的序列化，无需手动转JSON字符串。

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