React动态路由下TypeScript报错IStory|undefined无法赋值给IStory如何解决

报错原因 #

Array.find() 方法的原生返回值就是 匹配元素 | undefined 类型：当遍历完数组没有找到符合条件的元素时，就会返回 undefined。你直接将返回值声明为 IStory 类型，相当于强制要求返回值一定存在，和 find 的原生类型定义冲突，所以TS抛出了类型错误。

修复方案 #

方案1：兼容undefined+边界判断（最安全，推荐） #

允许 targetStory 为 undefined，后续渲染时做空判断处理，同时覆盖「storyList还未加载完成」「传入的id非法找不到对应帖子」的异常场景：

// 修改类型声明，允许undefined
const targetStory: IStory | undefined = storyList.find((story) => story.id === Number(id));

// 渲染前做判断
if (!id || !targetStory) {
  return <div>帖子不存在或加载中</div>
}

// 后续正常使用targetStory即可，TS会自动识别它已经是IStory类型

方案2：非空断言（仅适合100%确定能找到对应帖子的场景） #

如果你能从业务逻辑层面保证当前路由传入的id一定存在于storyList中，不会出现找不到的情况，可以用TS的非空断言运算符!，告诉TS你确定这个返回值不可能是undefined：

// 末尾加!即可
const targetStory: IStory = storyList.find((story) => story.id === Number(id))!;

⚠️ 注意：这种方式跳过了TS的类型校验，如果真的出现找不到的情况，运行时会出现访问属性报错的问题，不推荐在不确定的场景下使用。

方案3：兜底默认值 #

如果需要保证targetStory一定是IStory类型，又不想做空判断，可以给找不到的场景赋值兜底默认值：

const targetStory: IStory = storyList.find((story) => story.id === Number(id)) ?? {
  // 补全IStory要求的所有字段的默认值即可
  by: '',
  descendants: 0,
  id: 0,
  kids: [],
  score: 0,
  time: 0,
  date: '',
  title: '帖子不存在',
  type: '',
  url: ''
}

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