Next.js中使用getStaticProps无法正常接收props问题求助

你的代码逻辑本身没问题，但出现data为undefined通常是以下几个常见原因导致的，对应解决办法如下：

• 检查组件所在目录：getStaticProps是Next.js Pages Router专属的静态数据获取方法，只能作用于pages目录下的页面组件。如果你的Home组件放在components或其他非pages目录里，这个函数不会被Next.js执行，组件自然拿不到数据。把组件移到pages目录下（比如pages/index.js）再测试。

• 确认路由模式匹配：

  • 如果你用的是Next.js 13+的App Router（项目根目录是app文件夹），getStaticProps已经被废弃，改用组件内直接写数据逻辑或fetch加缓存策略实现静态生成：

    export default async function Home() {
      const dummyData = [
        { id: '1', name: 'john' },
        { id: '2', name: 'Tom' }
      ];
      console.log(dummyData);
      return (
        <ul>
          <li>USER</li>
          {dummyData.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      );
    }
    

  • 若使用的是Pages Router（pages目录结构），继续排查其他问题。

• 清理缓存并重启服务：开发环境下的缓存可能导致数据未更新，先停止npm run dev，删除项目根目录的.next文件夹，再重新启动开发服务器，查看控制台输出。

• 核对函数拼写与导出：确认getStaticProps拼写完全正确（别少写末尾的s），且组件是默认导出、getStaticProps是独立导出的，你的代码这部分没问题，但可以再仔细核对一遍。

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