Angular中如何正确处理类型为<User | null>的Observable？

报错根因 #

你遇到的报错有两层原因：

1. async管道使用顺序错误：你声明的user变量本身是Observable<User|null>类型，必须先用async管道解包出流里的实际值，才能访问用户属性，原写法直接访问user.email是尝试读取Observable对象的email属性，该属性自然不存在。
2. 联合类型的空值限制：即使修正管道顺序，解包后的值类型是User|null，直接访问email会触发TS的空值检查报错。

可选最佳实践方案（按适用场景排序） #

方案1：模板内直接处理（最轻量，适合简单展示场景） #

使用async管道解包 + 可选链操作符处理空值，无需修改组件TS代码：

<!-- 正确写法：先解包Observable，再用可选链访问属性，空值时自动返回undefined不报错 -->
{{ (user | async)?.email }}

如果需要批量访问多个用户属性，可以用*ngIf别名简化写法：

<ng-container *ngIf="user | async as currentUser">
  <p>邮箱：{{currentUser.email}}</p>
  <p>用户名：{{currentUser.name}}</p>
</ng-container>

未登录时ng-container内部内容不会渲染，也不会触发类型报错。 #

方案2：RxJS操作符提前过滤空值（适合路由守卫保护的登录后页面） #

如果你的组件只在用户登录后才会加载（已通过路由守卫拦截未登录状态），可以在Observable流中提前过滤掉null值，直接得到User类型的流：
组件TS代码：

import { filter } from 'rxjs';

export class UserProfileComponent {
  // 过滤null后，流类型自动推导为Observable<ApiModel.User>
  user = this.authService.currentUser$.pipe(filter(user => user != null));

  constructor(private authService: AuthService) {}
}

模板中可以直接访问属性，不需要可选链：

{{ (user | async).email }}

你也可以直接在AuthService中封装好非空的用户流，避免组件重复写过滤逻辑：

// AuthService 新增代码
public readonly loggedInUser$ = this.currentUser$.pipe(
  filter(user => user != null)
) as Observable<ApiModel.User>;

方案3：组件内订阅存储用户状态（适合需要在TS逻辑中操作用户信息的场景） #

如果组件的TS代码中也需要读取用户属性，可以直接订阅用户流，把值存在组件的普通变量中，配合类型守卫处理空值：

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class UserProfileComponent {
  currentUser: ApiModel.User | null = null;

  constructor(private authService: AuthService) {
    // takeUntilDestroyed 自动处理组件销毁时的退订，防止内存泄漏
    this.authService.currentUser$.pipe(takeUntilDestroyed())
      .subscribe(user => {
        this.currentUser = user;
        if (user) {
          // 这里可以安全访问user的所有属性
          console.log('当前登录用户邮箱：', user.email);
        }
      });
  }
}

模板中直接使用变量即可：

<p *ngIf="currentUser">{{currentUser.email}}</p>

Angular 16+ 优化方案：使用Signal替代Observable #

如果你使用的是Angular 16及以上版本，推荐用Signal来承载全局用户状态，使用更简洁，不需要async管道：
AuthService改造：

import { toSignal } from '@angular/core/rxjs-interop';

private readonly _currentUser = new BehaviorSubject<ApiModel.User | null>(null);
// 把Observable转为Signal，初始值为null
public readonly currentUser = toSignal(this._currentUser, { initialValue: null });

组件中直接使用：

<!-- 直接调用Signal取值，配合可选链即可 -->
{{ authService.currentUser()?.email }}

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