Next.js使用getStaticProps获取数据时报map undefined错误如何解决

报错的核心原因是执行map方法的questions变量为undefined，没有正确拿到getStaticProps返回的属性值，可按以下顺序排查：

• 确认组件存放路径：Next.js的getStaticProps仅对pages目录下的页面组件生效，如果你把FAQ组件放在components目录作为公共子组件调用，getStaticProps不会自动执行，自然无法传入questions属性。
  对应解决：要么将该组件移至pages目录作为独立页面使用，要么将getStaticProps逻辑移至引用FAQ组件的父页面中，父页面拿到数据后再通过属性传递给FAQ子组件。
• 排查开发服务缓存问题：如果确认组件存放在pages目录，可能是Next.js热更新缓存异常导致。可停止本地开发服务，删除项目根目录下的.next缓存文件夹，再重新执行npm run dev启动服务验证。
• 增加空值兜底逻辑：不管哪种场景，都可以给属性增加默认值或者空值判断，避免直接抛出报错影响页面渲染：
  1. 给组件参数设置默认值：

  export default function FAQ({ questions = [] }) {
  

  2. 调用map时使用可选链运算符：

  {questions?.map(q => (
  

  修改后的完整代码参考：

  export const getStaticProps = async () => {
      const data = [
          {
              "id": 1,
              "question": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
              "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste magni at magnam placeat. Non, saepe?"
          },
          {
              "id": 2,
              "question": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
              "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste magni at magnam placeat. Non, saepe?"
          }
      ]
      return {
          props: {
              questions: data
          }
      }
  }
  
  // 增加默认值兜底
  export default function FAQ({ questions = [] }) {
      return (
          <div className="p-8 grid bg-blanco" >
              <div className="grid place-content-center text-center mt-10 md:mt-0" >
                  <h1 className="text-2xl text-gun-rose-700 font-bold" >¿Tiene preguntas? Mira aquí</h1>
                  <h3 className="text-gun-rose-300 mt-4 max-w-2xl" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, suscipit. Aliquid molestias eveniet ullam? Dolores, minus? Perspiciatis neque voluptates iste!</h3>
              </div>
              {/* 可选链避免空值报错 */}
              {questions?.map(q => (
                  <div className="" key={q.id}>
                      <h3 className="">{q.question}</h3>
                      <p className="">{q.answer}</p>
                  </div>
              ))}
          </div>
      )
  }
  

• 额外注意：如果你使用的是Next.js 13+版本的App Router，getStaticProps已经被废弃，无法在App Router的组件中生效，需要改用async组件搭配fetch配置静态缓存的方式实现同等逻辑。

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