Next.js应用导航栏数组映射报错：TypeError: map is not a function 求助

错误原因 #

这个报错说明你调用.map()的NavRoutes不是数组类型——要么是undefined、null，要么是其他非数组值。结合你的代码，大概率是导入方式不匹配导致的。

具体解决方案 #

1. 修正导入语句 #

你的NavRoutes是用export default导出的，所以导入时必须用默认导入，不能用命名导入：

// 正确写法（替换成你的实际文件路径）
import NavRoutes from '../utils/navigation';

// 错误写法（不要用花括号包裹）
// import { NavRoutes } from '../utils/navigation';

如果用命名导入，会得到undefined，自然无法调用.map()。

2. 验证导入的正确性 #

在组件代码里添加打印，确认NavRoutes的类型和值：

console.log('NavRoutes:', NavRoutes, '类型:', typeof NavRoutes);

• 如果打印结果是undefined：检查文件路径是否写错，或者是否导入了错误的文件。
• 如果打印结果不是数组：确认导出的NavRoutes确实是你定义的数组（比如有没有不小心覆盖了这个变量）。

3. 增加容错判断（可选） #

为了避免后续类似报错，可以在映射前加数组类型判断，同时记得给映射元素添加key属性（符合React渲染要求）：

{Array.isArray(NavRoutes) && NavRoutes.map((navs, index) => {
  console.log(navs.title);
  return (
    <Link key={index} href={navs.link}>
      <div className={`${router.asPath === navs.link ? "text-active-red" : ""}`}>
        {navs.title}
      </div>
    </Link>
  );
})}

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