Angular12中Observable<Customer|undefined>无法赋值给Observable<Customer>如何解决

Angular 12 默认启用了 TypeScript 严格模式配置（包含strictNullChecks），会对可能为undefined的返回值做强制校验。你当前的getCurrentCustomer selector 中，state.entities[state.selectedCustomerId ?? 0]访问字典属性时，如果对应 id 没有匹配的实体，返回值天然就是Customer | undefined类型，这就是类型不匹配的核心原因。
你之前使用的??运算符未生效是因为this.store.select(...)返回的 Observable 本身永远不会是null/undefined，你判断的是 Observable 本身而不是它发出的值，所以该写法无效。

方案1：在Selector层兜底返回默认实体（推荐） #

直接在 selector 里处理 undefined 情况，从源头保证返回值一定是 Customer 类型：

export const getCurrentCustomer = createSelector(
  getCustomerFeatureState,
  getCurrentCustomerId,
  state => {
    const customer = state.entities[state.selectedCustomerId ?? 0];
    // 兜底返回初始化的默认Customer对象，避免undefined
    return customer ?? {
      // 这里填写你的Customer类型所有必填属性的默认值
      id: 0,
      name: '',
      // 其他属性按需补全
    } as Customer
  }
);

修改后 selector 的返回类型就是Observable<Customer>，组件内直接赋值不需要额外处理。

方案2：组件层使用RxJS运算符处理流的返回值 #

如果你不想修改 selector，也可以在组件订阅前对流发出的值做兜底处理：

写法A：兜底默认值 #

import { map } from 'rxjs';

const customer: Observable<Customer> = this.store.select(myCustomerReducer.getCurrentCustomer).pipe(
  map(cust => cust ?? { id:0, name: '' /* 补全默认属性 */ } as Customer)
);

写法B：过滤掉undefined值（适合业务上可以等待有效值的场景） #

import { filter } from 'rxjs';

const customer: Observable<Customer> = this.store.select(myCustomerReducer.getCurrentCustomer).pipe(
  filter((cust): cust is Customer => !!cust) // 类型守卫收窄类型
);

该写法会跳过所有undefined的发射值，只有当返回真实Customer对象时才会向下传递。

方案3：显式非空断言（仅适合100%确定一定会有值的场景，谨慎使用） #

如果你能保证业务逻辑上selectedCustomerId对应的实体一定存在，可以用非空断言!告诉TS该值不可能为undefined：

export const getCurrentCustomer = createSelector(
  getCustomerFeatureState,
  getCurrentCustomerId,
  state => state.entities[state.selectedCustomerId ?? 0]! // 末尾加!非空断言
);

或者组件层赋值时加类型断言：

const customer: Observable<Customer> = this.store.select(myCustomerReducer.getCurrentCustomer) as Observable<Customer>;

注意该方案只是绕开类型检查，如果实际运行时出现undefined会有潜在报错，不推荐优先使用。

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