TS编译报错TS2322：'Listing | undefined'无法赋值给'Listing'类型

TypeScript 中数组的find()方法在未查询到匹配项时会返回undefined，因此该方法的返回值类型为Listing | undefined；但你组件内定义的listing属性被标注为Listing类型，TS静态类型校验不允许将可能为undefined的值赋值给明确不接受undefined的变量，因此抛出类型不匹配错误。

根据你的业务场景选一种即可：

• 非空断言方案（适合mock开发阶段，确定id一定能匹配到数据的场景）
  在find()语句末尾加TS非空断言操作符!，手动告诉TS该返回值一定存在，跳过undefined类型校验：

  this.listing = fakeListings.find(listing => listing.id === id)!;
  

  注意：该方案没有运行时兜底，如果真的出现id匹配不到的情况，后续操作this.listing的逻辑会触发空值报错。

• 类型收窄+兜底方案（适合生产环境，最稳妥）
  先接收find的返回值，手动判断是否匹配到数据，匹配不到时走异常逻辑（跳转404、返回列表页、展示错误提示均可），判断通过后TS会自动将值的类型收窄为Listing，不会再报类型错误：

  const targetListing = fakeListings.find(listing => listing.id === id);
  if (!targetListing) {
    // 自定义匹配失败的处理逻辑
    console.error('未找到对应房源信息');
    return;
  }
  this.listing = targetListing;
  

• 放宽属性类型方案
  直接修改组件内listing属性的类型定义，允许其接收undefined值：

  listing: Listing | undefined;
  

  注意：使用该方案时，模板中用到listing属性的位置需要加*ngIf="listing"做存在性判断，否则模板渲染时可能出现空值报错。

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