Next.js报Cannot read properties of undefined (reading 'map')求助

报错是因为posts值为undefined时强行调用.map()方法，根源是你写错了Next.js的预渲染数据获取函数名。

Next.js识别的静态页数据获取函数固定为getStaticProps，你的代码里写的是getStaticProp，末尾少了s，框架不会执行这个写错名字的函数，自然不会把GraphQL请求拿到的posts数据传给页面组件，组件拿到的posts默认就是undefined。

• 第一步：修正函数名，把代码里的函数定义从

export async function getStaticProp() {

改为

export async function getStaticProps() {

改完后Next.js会在构建/增量再生时执行这个函数，把拿到的posts作为props传给Home组件。

• 第二步（建议添加，避免后续接口异常触发同类报错）：给posts加兜底默认值，两种写法选一种即可：
  1. 组件参数直接给默认空数组：

  export default function Home({ posts = [] }) {
    // 其余组件逻辑保持不变
  

  2. 调用map时加可选链判断：

  <main className={styles.main}>
  {posts?.map((post) => (
      <BlogCard 
          title={post.title}
          author={post.author}
          coverPhoto={post.coverPhoto}
          key={post.id}
          datePublished={post.datePublished}
          slug={post.slug}
      />
  ))}
  </main>
  

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