Next.js中调用data.map时报错Error: data.map is not a function的问题

核心问题：返回数据结构不一致 #

报错 Error: data.map is not a function 的本质是：你调用 map 的 data 不是数组——map 是 JavaScript 数组的专属方法，对象调用它必然会抛出这个错误。

对比两个接口的返回内容：

• 第一个接口（jsonplaceholder）返回的是数组格式，每个元素是带 title 字段的对象，所以直接用 data.map 可以正常工作。
• 第二个 SEC 接口返回的是对象格式，真正的列表数据嵌套在对象的 data 属性里（返回结构大致为 { data: [...], ... }），直接对整个对象调用 map 自然会报错。

修正后的代码 #

你需要先从返回的对象中取出数组部分再调用 map，同时注意 React 的 key 规范（不要用空字符串作为 key）：

async function getData() {
  const res = await fetch('https://data.sec.gov/api/xbrl/frames/us-gaap/AssetsCurrent/USD/CY2021Q4I.json')
  return res.json()
}

export default async function Home() {
  const responseData = await getData()
  // 提取出数组类型的列表数据
  const data = responseData.data

  return (
    <div>
      <div className="grid gap-3 grid-cols-fluid">
        {data.map((item: any) => (
          <p key={item.adsh}>{item.label}</p>
        ))}
      </div>
    </div>
  )
}

额外注意：SEC 的接口可能存在跨域限制，如果本地开发遇到 CORS 错误，需要在 Next.js 中配置反向代理（比如在 next.config.js 里设置 rewrites 规则）。

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