Next.js渲染Strapi GraphQL数据报错：event.map is not a function

event.map is not a function 本质是你尝试在非数组类型上调用数组方法，哪怕控制台能看到数据，也得先确认变量类型、结构和渲染时机的问题，以下是具体排查步骤：

1. 确认event的实际类型与结构 #

先在组件内打印变量的真实状态，避免控制台异步更新的误导：

console.log(typeof event);
console.log(JSON.parse(JSON.stringify(event))); // 打印当前渲染时的静态值

• 如果输出是object，大概率是Strapi的GraphQL返回结果有嵌套结构，比如数据存放在event.data字段里，你需要遍历event.data而非外层对象；
• 如果输出是单个对象，说明你的GraphQL查询用了单数event（返回单个数据）而非复数events（返回数组），检查查询语句是否正确：

  // 正确的列表查询（返回数组）
  query GetEvents {
    events {
      data {
        id
        attributes {
          title
          date
        }
      }
    }
  }
  

2. 处理初始渲染的空值/非数组情况 #

Next.js在SSR/SSG阶段，数据可能未加载完成，初始状态可能是undefined/null/{}，直接调用map会报错，加个兜底判断：

// 方式1：可选链+空数组兜底
{event?.data?.map(item => (
  <div key={item.id}>{item.attributes.title}</div>
))}

// 方式2：条件渲染
{Array.isArray(event) ? (
  event.map(item => <div key={item.id}>{item.title}</div>)
) : (
  <p>加载中...</p>
)}

3. 检查事件适配器的返回结构 #

确认适配器是否正确返回数组而非单个对象：

// 错误示例：返回单个对象
const eventAdapter = (data) => {
  return {
    id: data.id,
    title: data.attributes.title
  }
}

// 正确示例：处理数组并返回数组
const eventAdapter = (dataArray) => {
  return dataArray.map(item => ({
    id: item.id,
    title: item.attributes.title
  }))
}

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