Next.js中renderSidebar报Cannot read 'map' of undefined错误怎么解决

安全阿岳

2026-10-2

错误产生原因

该报错本质是调用了undefined的map方法，对应你的代码场景具体原因如下：

你通过connect直接关联了Redux的全局状态，组件首次渲染时，categories对应的异步数据还未请求完成，Redux中该字段初始值为undefined，直接调用categories.map就会触发报错。
你代码中renderCollection、filterProductsByCat方法也直接使用了categories，同样存在相同的报错隐患，只是renderSidebar先执行触发了报错。
若后端接口请求失败、返回数据格式异常，也可能导致categories为undefined或null，触发该错误。

修复方案

可根据你的开发需求选择以下任意一种方案，建议搭配使用：

解构props时设置默认空数组
在所有用到categories的位置，解构时直接设置默认值为空数组，从根源避免undefined的情况：

// 以renderSidebar为例，其余用到的地方同理修改
renderSidebar() {
  const { categories = [] } = this.props;
  // 原有逻辑不变
}

调用map前增加非空判断
使用可选链运算符简化非空校验，只有categories存在时才执行遍历逻辑：

{categories?.map(category => (
  // 原有遍历逻辑不变
))}

所有调用categories.map的位置都需要做上述修改。

优化Redux状态映射逻辑
不要直接将整个state传入组件，明确指定需要的字段并设置兜底值，避免全局state结构变动导致取值异常：

// 修改原connect的写法
export default connect(state => ({
  categories: state.categories || [],
  products: state.products || []
}))(Collections);

增加类型校验（可选，推荐）
给组件增加PropTypes校验和默认属性，提前拦截类型异常问题：

// 顶部引入依赖
import PropTypes from 'prop-types';

// 组件定义之后、导出之前增加如下代码
Collections.defaultProps = {
  categories: [],
  products: []
};

Collections.propTypes = {
  categories: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    name: PropTypes.string.isRequired,
    slug: PropTypes.string.isRequired,
    products: PropTypes.number.isRequired
  })),
  products: PropTypes.array
};

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