Angular中RxJS Subject.next()传undefined值报错的解决方法

云上老周

2026-8-29

问题原因

这个类型报错和Angular、TypeScript的版本及类型校验配置直接相关：

TypeScript 从3.7版本开始，更新了数组find()方法的内置类型定义，明确标注返回值类型为泛型参数 | undefined——这完全符合JS的实际运行逻辑：当数组内没有匹配项时，find确实会返回undefined。
你所看的Udemy课程代码能正常运行，无外乎两种情况：要么课程录制时使用的TypeScript版本低于3.7，当时的类型定义未覆盖undefined的返回场景；要么课程项目的tsconfig.json中关闭了严格空值检查（strictNullChecks: false）或全量严格模式（strict: false），编译器不会对null/undefined的类型不匹配做拦截。

你本地出现报错不是配置遗漏，反而是当前Angular脚手架默认开启严格类型检查的正常表现，校验规则比课程项目更严谨，能提前捕获潜在的运行时bug。

修复方案

不建议通过关闭严格类型检查的方式绕过报错，会丢失TypeScript的核心类型防护能力，根据业务场景选择以下方案即可：

方案1：边界判断+类型收窄（最推荐，健壮性最高）
先接收find的返回结果，判断结果存在后再做后续赋值和发射值操作，TypeScript会自动识别收窄类型，不会再报类型错误：

startExercise(selectedId: string) {
  const targetExercise = this.availableExercise.find(ex => ex.id === selectedId);
  // 处理找不到匹配项的边界场景
  if (!targetExercise) {
    throw new Error(`未找到ID为${selectedId}的训练项`);
  }
  this.runningExercise = targetExercise;
  this.exerciseChanged.next({ ...this.runningExercise });
}

这种写法既符合TS严格类型要求，也覆盖了非法入参的边界场景，避免运行时出现undefined相关错误。

方案2：非空断言（仅适用于入参100%合法的场景）
如果从业务逻辑上能完全保证传入的selectedId一定存在于可用训练列表中，不可能出现匹配失败的情况，可以使用TypeScript的非空断言操作符!，明确告诉编译器该返回值不可能为undefined：
```
startExercise(selectedId: string) {
  this.runningExercise = this.availableExercise.find(ex => ex.id === selectedId)!;
  this.exerciseChanged.next({ ...this.runningExercise });
}
```
注意：该方案仅跳过编译时检查，若后续业务变动出现非法入参，运行时依然会触发错误，健壮性弱于方案1。

你之前尝试将runningExercise定义为Exercise | undefined的写法之所以会触发后续报错，是因为展开undefined值时，得到的对象所有属性都会被推断为可选类型，和Subject<Exercise>要求的必选属性结构不匹配，本质是没有从根源处理find可能返回undefined的问题。

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