Next.js中getServerSideProps序列化错误的解决方法

错误原因 #

你遇到的SerializableError是因为getServerSideProps返回的props.experience值为undefined，而Next.js要求所有传递给页面的props必须是可JSON序列化的，undefined不满足这个要求。

具体触发场景：

1. 服务器地址缺少https://协议，导致fetch请求失败，experience保持初始的空数组，数组没有results属性，所以experience.results为undefined。
2. 即使请求成功，stage环境的接口返回数据可能没有results字段，同样会导致experience.results为undefined。

修复方案 #

1. 补全服务器地址的协议 #

首先修正服务器地址，添加https://，否则无法正常发起请求：

const server = 'https://stage.yourguide.pk';

2. 确保experience.results始终有可序列化的值 #

通过初始化值、响应检查和兜底处理，保证experience.results不会出现undefined：

修改后的完整代码：

export async function getServerSideProps(context) {
  // 初始化为符合接口返回结构的对象，确保results默认是空数组
  let experience = { results: [] };
  const server = 'https://stage.yourguide.pk';
  
  try {
    const data = await fetch(
      `${server}/api/user/getallexperience?title=${context.params.experiencesTitle}`,
      {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
      }
    );

    // 检查接口响应是否成功，避免解析错误响应
    if (!data.ok) {
      throw new Error(`请求失败：${data.status} ${data.statusText}`);
    }

    experience = await data.json();
    // 兜底：如果返回数据没有results字段，手动设置为空数组
    if (!experience.hasOwnProperty('results')) {
      experience.results = [];
    }
  } catch (error) {
    console.error('获取体验数据出错：', error);
  }

  return {
    props: {
      title: context.params.experiencesTitle,
      // 双重保险，确保最终值不是undefined
      experience: experience.results || [],
    },
  };
}

关键修改点说明 #

• 初始experience设为{ results: [] }：和接口返回的结构对齐，即使请求失败，也能保证experience.results是一个空数组。
• 增加响应状态检查：捕获接口返回的错误状态码，避免解析无效的响应内容。
• 兜底处理results字段：确保无论接口返回什么数据，results都存在且为数组类型。
• 返回props时添加|| []：双重保险，防止极端情况下experience.results仍为undefined。

内容的提问来源于stack exchange，提问作者Afaq Shahid Khan