Next.js请求API数据报Cannot read property 'map' of undefined错

getStaticProps是Next.js框架专属的服务端数据获取API，仅支持在pages目录下的路由页面组件中使用，你当前把该方法写在components/Blog.jsx这个公共组件文件内，Next.js构建/运行时根本不会执行这个方法，组件接收到的people入参默认是undefined，对undefined直接调用.map()方法就会触发你看到的报错。
另外原代码还有两个潜在问题：

• 没有给people设置默认兜底值，一旦接口返回异常、网络报错，还是会触发同类错误
• 循环渲染列表项没有加唯一key属性，会触发React渲染警告，极端情况会导致渲染错乱

你可以根据自己的业务场景选下面两种方案之一：

方案1：保留静态生成（推荐，性能更好） #

把数据获取逻辑移到对应的路由页面文件中，拿到数据后再通过props传给公共组件：

1. 先修改路由页面（比如你要在/blog路径展示该内容，就创建/修改pages/blog.js）：

// pages/blog.js
import Blog from '../components/Blog.jsx'

// getStaticProps 必须写在page页面文件内才会生效
export const getStaticProps = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const people = await response.json();

  return {
    props: {
      // 提前校验返回值，兜底空数组
      people: Array.isArray(people) ? people : []
    }
  };
};

export default function BlogPage({ people }) {
  return <Blog people={people} />
}

2. 修改公共组件components/Blog.jsx，移除无效的getStaticProps，增加props兜底，补充列表key：

// components/Blog.jsx
export default function Blog({ people = [] }) {
  return (
    <div>
      {people.map(person => (
        // 用接口返回的唯一id作为key
        <div key={person.id}>
          <h1>{person.name}</h1>
          <h2>Website: {person.website}</h2>
          Email: <code>{person.email}</code>
        </div>
      ))}
    </div>
  );
};

方案2：组件内客户端取数 #

如果这个组件需要在多个页面复用、不方便在每个页面写取数逻辑，可以在组件内用React的useEffect在客户端侧拉取数据：

// components/Blog.jsx
import { useState, useEffect } from 'react'

export default function Blog() {
  // 初始化people为空数组，从根源避免undefined问题
  const [people, setPeople] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true)
      try {
        const res = await fetch('https://jsonplaceholder.typicode.com/users')
        const data = await res.json()
        setPeople(Array.isArray(data) ? data : [])
      } catch (err) {
        console.error('数据拉取失败：', err)
        setPeople([])
      } finally {
        setLoading(false)
      }
    }
    fetchUsers()
  }, [])

  if (loading) return <div>数据加载中...</div>

  return (
    <div>
      {people.map(person => (
        <div key={person.id}>
          <h1>{person.name}</h1>
          <h2>Website: {person.website}</h2>
          Email: <code>{person.email}</code>
        </div>
      ))}
    </div>
  )
}

注意：无论用哪种方案，都要保证调用.map()的变量始终是数组类型，通过默认值、返回值校验的方式做兜底，就能彻底避免这类"读取undefined属性"的报错。

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