TypeScript遍历对象内数组时出现‘Object is possibly undefined’错误

错误根源是你的IData接口里items被定义为可选属性（带?），TypeScript会严格检查类型，认为data.items可能是undefined，直接调用find()会触发类型错误。以下是几种实用解决方案：

1. 使用可选链操作符（推荐） #

在data.items后添加?.，当items为undefined时会短路返回undefined，避免执行后续的find()：

const filtered = data.items?.find((d) => d.name === key);

后续的filtered?.value已经处理了filtered为undefined的情况，整体逻辑保持一致。

2. 空值合并运算符+默认空数组 #

如果希望items不存在时用空数组兜底，确保find()总能正常调用，可以用??给默认值：

const filtered = (data.items ?? []).find((d) => d.name === key);

这样即使data.items是undefined，也会替换成空数组，find()执行后返回undefined，不影响后续渲染。

3. 提前做类型守卫判断 #

在使用items前先检查是否存在，TypeScript会自动缩小类型范围，消除错误：

{Object.entries(arr).map(([key]) => {
  if (!data.items) return null; // 或者返回空的JSX元素，比如<div></div>
  const filtered = data.items.find((d) => d.name === key);
  return <h1>{filtered?.value}</h1>;
})}

这种方式适合需要在items不存在时做特殊处理的场景，比如不渲染对应的h1。

4. 修改接口定义（业务允许时） #

如果业务逻辑中每个IData实例必然包含items，可以直接去掉items的可选标记，强制要求该属性存在：

export interface IData {
  someString?: string;
  items: { // 移除?
    name?: string;
    value?: string;
  }[];
}

注意：这种方式需要确保所有传入dataCollection的元素都有items属性，否则会触发编译错误。

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