React Context构建报错：Type 'UserContextType' 不是数组类型

错误原因 #

你的FilterContext提供的是对象类型的UserContextType，但在Filter组件中错误地使用了数组解构语法来获取Context值。本地开发可能因类型检查策略宽松未触发错误，但构建时TypeScript严格类型检查会抛出该错误。

问题代码定位 #

在Filter组件中这一行写法错误：

const [filters, setFilters] = useContext(FilterContext);

数组解构仅适用于数组类型的Context值，而你的Context value是包含filters和setFilters属性的对象。

修复方案 #

将数组解构改为对象解构，匹配Context的value结构：

const { filters, setFilters } = useContext(FilterContext);

额外类型问题修复 #

你的代码中存在隐性类型不匹配：newArray是string[]类型，但Filters中的rating是number[]，在更新rating时需要将字符串转为数字：

if (parentList.classList.contains("js-rating")) {
  setFilters((prevState) => ({ 
    ...prevState, 
    rating: newArray.map(id => Number(id)) // 转换为number数组
  }));
}

补充说明 #

确保Filter组件的Props类型已正确定义，比如：

type Props = {}; // 根据组件实际接收的props调整

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