Next.js v13动态页面数据获取失败，props传递异常求助

报错信息 #

./somepage/[id].js (20:25) @ map
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'map')

问题现象 #

在Next.js v13项目中创建动态页面[id].js，尝试通过getStaticProps和getStaticPaths从helper文件获取数据时：

• getStaticProps中的console.log(posts)无输出，页面组件接收的posts为undefined，触发map调用报错
• 直接在页面组件中调用postData能正常获取数据，怀疑是Next.js版本导致props传递异常

相关代码 #

动态页面 ./somepage/[id].js #

// "./somepage/[id].js"

import {postData} from "./lib/helper"


function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

export default function Post({  posts }) {
 
  console.log(posts); //输出"undefined"
  console.log(postData) //成功打印数据
  return (
    <>
     {posts.map((post) =>{
       <div key = {post.id}>
        Hello {post.author}, This is your title: {post.title}
       </div>
      })}
    </>
  );
}

export async function getStaticPaths({ params }) {
  const { id } = params;
  const posts = postData(id);

  const paths = posts.map((item) => {
    params: {
      id: item.id.toString();
    }
    return {
      paths,
      fallback: false,
    };
  });
}

export async function getStaticProps() {
  const posts = postData();

  console.log(posts); //控制台无输出
  return {
    props: { posts }, //该props在页面中为undefined
  };
}

辅助文件 ./lib/helper.js #

// "./lib/helper.js"

export function postData(id) {
const data = [{
// 省略数据内容
}]

if(id){
return data.filter((item) => {
   return item.id === id;
});
}

return data;

}

问题原因及修复方案 #

1. 路由模式适配问题 #

如果你的页面放在app/目录下（App Router），getStaticProps和getStaticPaths完全不生效——这两个方法是Pages Router（pages/目录）专属API。

• 修复：要么把页面迁移到pages/目录；要么改用App Router的静态生成方案（用generateStaticParams替代getStaticPaths，直接在组件内调用数据方法或利用fetch的静态优化特性）。

2. getStaticPaths 代码逻辑错误 #

原代码存在语法和逻辑双重问题：

• getStaticPaths不需要接收params参数，它的作用是预生成所有可能的动态路径，需先获取全量数据再生成路径
• map内部对象语法错误，返回结构完全不符合要求
• 正确写法：

export async function getStaticPaths() {
  // 获取全量数据生成所有可能的路径
  const allPosts = postData();
  const paths = allPosts.map((item) => ({
    params: {
      id: item.id.toString()
    }
  }));

  return {
    paths,
    fallback: false
  };
}

3. getStaticProps 未处理动态参数 #

动态页面需要根据当前路由的id过滤数据，原代码未接收params参数，导致无法返回对应数据（甚至因为路由模式错误根本没执行）：

export async function getStaticProps({ params }) {
  // 根据当前路由id获取对应数据
  const posts = postData(params.id);
  console.log(posts);
  return {
    props: { posts }
  };
}

4. 页面组件map未返回元素 #

原map函数内的JSX没有return，同时要给posts设置默认值避免空值报错：

export default function Post({ posts = [] }) {
  console.log(posts);
  return (
    <>
     {posts.map((post) => (
       <div key={post.id}>
        Hello {post.author}, This is your title: {post.title}
       </div>
     ))}
    </>
  );
}

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