JS/Next.js报错TypeError: arr.map is not a function问题排查

开发者阿泽

2026-8-28

报错原因

TypeError: arr.map is not a function 只有一种触发可能：调用.map()的arr不是数组类型。
对照你贴的接口返回结构就能直接定位问题：你代码中取到的footerData[0].attributes.items是单个对象，不是你代码预期的数组结构，自然无法调用数组原型上的map方法。
之前代码能正常运行，是因为旧接口的items字段返回数组格式，现在接口返回结构做了调整，才会出现原本正常的代码突然失效的情况，和JS、Next.js本身的运行逻辑无关。

修复方案

根据实际业务预期选对应改法即可：

如果业务上items固定只返回单个导航项，直接去掉map逻辑处理数据即可：

export const footerAdapter = (footerData) => {
  const item = footerData[0].attributes['items']
  // 如果最终需要返回数组格式，把处理后的单个对象包进数组即可
  return [{
    link: item.link,
    title: item.title
  }];
};

如果接口存在返回单个对象、返回数组两种可能（比如单条/多条数据复用同一接口），加一层类型判断做兼容，统一转成数组后再调用map：

export const footerAdapter = (footerData) => {
  const items = footerData[0].attributes['items']
  // 非数组场景下手动包裹为数组，兼容两种返回结构
  const arr = Array.isArray(items) ? items : [items]
  return arr.map((md) => {
    return {
      link: md.link,
      title: md.title
    };
  });
};