NextJS中props始终返回undefined问题求助

你的代码逻辑本身没问题，但props.heading返回undefined的核心原因，大概率是这个组件没有放在Next.js的pages目录下。

Next.js对getStaticProps这类数据获取方法有严格的使用规则：

• 仅在pages目录下的页面组件中，getStaticProps才会被框架自动执行，并把返回的props注入组件
• 如果是普通组件（非pages目录下的组件），Next.js不会识别并运行这些数据获取方法，组件自然拿不到预期的props

另外可以排查两个小细节：

• 确认你的Next.js版本在9.3及以上（getStaticProps是9.3版本才新增的特性）
• 检查组件导出方式：默认导出页面组件、getStaticProps单独命名导出，你的代码这部分是正确的

如果要在普通组件中使用数据，有两种常用方案：

• 把数据获取逻辑放在pages目录的页面组件里，再将props传递给普通组件
• 用getStaticProps获取数据后，通过状态管理工具（比如Redux、React Query）或者上下文共享数据

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