NextJS调用博客API后遍历数据报reading 'map'类型错误如何解决

错误原因 #

TypeError: Cannot read properties of undefined (reading 'map') 报错的核心是调用map方法的blogs变量为undefined，结合你提供的代码和接口返回截图，问题出在两处：

1. 接口返回的完整数据是外层包裹的对象，实际博客数组存在于posts字段中，你直接将整个返回对象赋值给了blogs，导致组件拿到的不是数组
2. 没有做空值兼容，即使接口异常返回数据不符合预期，也会直接触发报错

修复方案 #

1. 修改getStaticProps的取值逻辑，取接口返回的posts字段作为blogs的值：

export async function getStaticProps() {
  const res = await fetch(
    'https://ed-blog-api.herokuapp.com/api/posts'
  )
  const data = await res.json()
  // 从返回对象中提取博客数组
  const blogs = data.posts

  return {
    props: {
      blogs,
    },
  }
}

如果接口返回的数组字段不是posts，可以先打印data查看完整返回结构，取对应字段即可。

2. 增加组件侧的空值兼容，避免极端情况报错：

// 给blogs设置默认空数组
const Blogs = ({ blogs = [] }) => {
  return (
    <div className='all-blogs'>
      {/* 可选链调用map，兼容blogs为undefined的场景 */}
      {blogs?.map((blog) => (
        <div className='single-blog' key={blog._id}>
          <h1>{blog.title}</h1>
          <p>{blog.text}</p>
        </div>
      ))}
    </div>
  )
}

如果需要更友好的体验，可以增加空数据提示：

{blogs?.length ? blogs.map(/* 原有遍历逻辑 */) : <p>暂无博客内容</p>}

内容的提问来源于stack exchange，提问作者Luffy D. Monkey