Angular 14.2+NGXS编译报错：null类型无法赋值问题排查

问题根源 #

尽管你声明data$的类型为Observable<CustomItem[] | undefined>，但Angular的async管道在部分场景下（比如Observable未完成、类型推断歧义）会被TypeScript判定为可能返回null；再加上你多次调用(data$ | async)，每次订阅的状态可能存在不一致，最终触发类型检查报错。

解决方案 #

1. 使用async管道的as语法（推荐）

该方案既能解决类型问题，还能避免多次订阅Observable（每次async管道都会触发一次独立订阅），同时让TypeScript准确推断变量类型：

<library-select
  *ngIf="(data$ | async) as data"
  [data]="data"
  (itemSelected)="itemSelected($event)"
></library-select>

as data会将async管道的结果赋值给data变量，TypeScript会根据data$的定义自动推断data为CustomItem[] | undefined，且*ngIf会自动过滤null和undefined；如果需要保留undefined的展示逻辑，可以改为：

<ng-container *ngIf="(data$ | async) as data; else loading">
  <library-select
    [data]="data"
    (itemSelected)="itemSelected($event)"
  ></library-select>
</ng-container>
<ng-template #loading>
  <!-- 加载状态模板 -->
</ng-template>

2. 在组件中显式过滤null值

如果需要保留原有*ngIf判断逻辑，可以在data$的管道中添加filter操作符，明确排除null值：

import { filter } from 'rxjs';

@Select(SelectState.getData) data$: Observable<CustomItem[] | undefined>;

ngOnInit(): void {
  this.data$ = this.data$.pipe(
    filter(val => val !== null)
  );
}

这会让TypeScript明确知晓data$不会发射null值，直接消除类型错误。

3. 确认Store初始状态类型

检查你的SelectStateModel定义，确保对应数据属性的类型为CustomItem[] | undefined，且初始值明确设为undefined，避免意外引入null：

export interface SelectStateModel {
  data: CustomItem[] | undefined;
}

@State<SelectStateModel>({
  name: 'select',
  defaults: {
    data: undefined // 明确设为undefined，不要设为null
  }
})
export class SelectState {}

4. 非空断言（不推荐）

如果你能100%确认(data$ | async)不会返回null，可以使用非空断言!强制类型转换，但该方式会跳过TypeScript的类型检查，可能隐藏潜在问题：

<library-select
  *ngIf="(data$ | async) !== null"
  [data]="(data$ | async)!"
  (itemSelected)="itemSelected($event)"
></library-select>

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