TypeScript+React过滤数组对象时类型报错及优化方案

TS报错和实现冗余来自两个核心问题：

• 你在genre_ids.map里返回了匹配条件 && item，这个表达式的返回值是false | movieApiResult联合类型。后续的filter虽然在运行时筛掉了false值，但TS的类型系统不会自动推断filter的筛选逻辑，所以最终生成的数组元素类型仍然包含false，访问item.id属性时自然抛出类型错误。
• 现有实现逻辑冗余：map套map、filter、reduce拍平的写法多做了两轮无意义遍历，还会产生重复数据——如果单个电影的genre_ids里有多个值和查询参数匹配，map阶段会往数组里塞入多个重复的电影对象，导致渲染重复项。

直接用单轮filter完成筛选，逻辑更短、性能更好，TS也能自动推导正确类型：

// 提前取查询参数，避免遍历中重复调用get
const targetGenreId = searchParams.get("genre_ids");

// 兜底处理无数据场景
if (!data?.results) return null;

// 单轮过滤直接得到结果，无多余遍历
const displayList = targetGenreId
  ? data.results.filter(item => {
      // 查询参数提前转数字，和genre_ids的数字类型直接匹配，减少类型转换次数
      const targetId = Number(targetGenreId);
      return item.genre_ids.includes(targetId);
    })
  : data.results;

return (
  <>
    {displayList.map((item) => (
      <div key={item.id}>
        {toggle ? <ListData item={item} /> : <GridData item={item} />}
      </div>
    ))}
  </>
);

扩展说明：如果后续需要支持多选流派（比如genre_ids传多个值），只要把判断逻辑改成检查目标id数组和item.genre_ids有没有交集即可，核心还是用filter直接筛选，不要套map产生带布尔值的联合类型。

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