NextJS 13 getStaticPaths中map报错：Cannot read properties of undefined

在Next.js 13中使用动态路由，创建了动态页面[id].js，尝试在getStaticPaths中获取数据生成路径：

const res = await fetch(`myAPI`);
const resData  = await res.json();
    
const paths = resData.data.map((r) => ({
     params: { id: r.id}
}));

return {
    paths,
    fallback: false
}

这段代码触发了map函数相关错误，但硬编码路径时可正常运行：

paths: [
  {params: { id: '67'}}
],

另外在组件内用Axios测试相同的map逻辑时，控制台能正常输出数据：

axios
.get(`myAPI`)
.then((response) => {
  console.log(response.data.map((res) => {return(res.id)}))
})

出现这种差异的核心原因通常有两个：

1. Fetch与Axios的响应数据结构差异 #

Axios会自动将接口响应的主体内容封装在response.data中，但Fetch API的res.json()返回的就是完整的响应体对象。如果你的API直接返回的是数组（而非包含data字段的对象），那么resData.data就是undefined，调用map自然会报错。而组件里用Axios时，response.data直接对应API返回的数组，所以map逻辑正常。

解决方法：
先打印resData确认结构，调整代码适配实际的响应格式：

const res = await fetch(`myAPI`);
const resData = await res.json();

// 若resData本身就是数组，直接调用map
const paths = resData.map((r) => ({
  params: { id: r.id.toString() } // 注意：params中的id必须是字符串类型
}));

return {
  paths,
  fallback: false
};

2. Next.js 13路由模式混淆 #

如果你的动态页面放在app目录（App Router模式），getStaticPaths已经被弃用，需要使用generateStaticParams函数来生成静态路径。继续使用getStaticPaths会导致逻辑不生效，进而引发错误。

解决方法：
改用generateStaticParams（App Router专属）：

export async function generateStaticParams() {
  const res = await fetch(`myAPI`);
  const resData = await res.json();

  return resData.map((r) => ({
    id: r.id.toString(),
  }));
}

额外注意点 #

getStaticPaths返回的params.id必须是字符串类型，如果你的API返回的id是数字，一定要用toString()转换，否则也会触发路径匹配错误。

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