Next.js中getServerSideProps序列化undefined报错的修复方法

问题根源 #

错误提示undefined cannot be serialized as JSON，说明request.results的值为undefined，无法被Next.js序列化为JSON传递给页面组件。主要有两个诱因：

1. API路径拼写错误：requests.js中fetchTrending的url写成了/treanding（缺失字母'n'），正确路径应为/trending，这会导致TMDB API请求失败，返回的响应不含results字段。
2. 未处理API请求异常：若API请求因网络问题、无效参数等原因返回错误，res.json()得到的响应对象同样不会有results字段，最终导致request.results为undefined。

修复方案 #

1. 修正API路径拼写错误 #

修改utils/requests.js里的fetchTrending配置：

fetchTrending: {
    title: 'Trending',
    url: `/trending/all/week?api_key=${API_KEY}&language=en-US` // 将treanding改为trending
},

2. 处理请求异常与undefined值 #

在getServerSideProps中添加错误捕获逻辑，确保results永远不会是undefined：

import requests from '../utils/requests'

export async function getServerSideProps(context) {
  const genre = context.query.genre;
  let results = []; // 默认初始化为空数组

  try {
    const targetUrl = `https://api.themoviedb.org/3${
      requests[genre]?.url || requests.fetchTrending.url
    }`;
    const res = await fetch(targetUrl);
    
    // 校验响应状态
    if (!res.ok) {
      throw new Error(`API请求失败，状态码：${res.status}`);
    }

    const requestData = await res.json();
    // 存在results则赋值，否则保留空数组
    results = requestData.results || [];
  } catch (error) {
    console.error('数据获取失败:', error);
    // 捕获异常时，results维持空数组，避免出现undefined
  }
   
  return {
    props: {
      results, // 此时results必为数组，不会触发序列化错误
    },
  };
}

3. 可选：校验genre参数合法性 #

如果想避免无效genre参数触发的异常，可以先校验参数是否在合法范围内：

const validGenreKeys = Object.keys(requests);
const targetRequest = validGenreKeys.includes(genre) ? requests[genre] : requests.fetchTrending;
const targetUrl = `https://api.themoviedb.org/3${targetRequest.url}`;

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