Next.js getServerSideProps返回results字段JSON序列化报错如何解决？

Next.js要求getServerSideProps返回的所有props必须可以序列化为标准JSON格式，而undefined不属于合法JSON值，当返回的results值为undefined时就会触发该序列化错误。

results为undefined通常由以下两类原因导致：

• 网络请求失败、接口鉴权失败、请求参数错误导致TMDB返回错误响应，响应体中没有results字段
• 配置的requests对象中找不到对应genre的url、也不存在fetchTrending配置，导致请求路径错误，接口返回异常结构

方案1：添加请求异常捕获 + 字段兜底 #

在请求逻辑中添加错误处理，同时对results字段设置兜底值，代码修改示例如下：

export async function getServerSideProps(context) {
  const genre = context.query.genre;
  let results = []; // 兜底默认值可以根据业务需要改成null
  try {
    const requestUrl = `https://api.themoviedb.org/3${
      requests[genre]?.url || requests?.fetchTrending?.url || ''
    }`;
    // 校验请求路径是否合法
    if (!requestUrl) throw new Error('无效的请求路径');
    const res = await fetch(requestUrl);
    // 校验请求状态是否成功
    if (!res.ok) throw new Error(`接口请求失败，状态码：${res.status}`);
    const data = await res.json();
    results = data.results || [];
  } catch (e) {
    console.error('请求出错：', e);
    // 业务侧可以在这里做额外的错误处理逻辑
  }

  return {
    props: {
      results,
    },
  };
}

方案2：极简兜底（适用于不需要精细错误处理的场景） #

直接在返回props时把undefined替换为合法JSON值即可：

return {
  props: {
    results: request.results ?? null, // 空值合并运算符兜底为null
  },
};

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