Angular使用Firebase谷歌认证时authState赋值类型报错如何解决？

AngularFireAuth的authState属性返回的流类型本身就是Observable<firebase.User | null>：用户处于未登录状态时，流会发射null值，你当前定义的user$类型为Observable<firebase.User>，仅允许接收User类型的值，所以出现类型不匹配报错。

Type 'Observable<User | null>' is not assignable to type 'Observable'.
Type 'User | null' is not assignable to type 'User'.
Type 'null' is not assignable to type 'User'

对应翻译：

类型“Observable<User | null>”不可分配给类型“Observable”
类型“User | null”不可分配给类型“User”
类型“null”不可分配给类型“User”

• 方案1（最推荐，符合Firebase设计逻辑）：调整user$的类型定义，兼容null场景
  修改代码里的user$声明行即可：

// 原来的写法
// user$:Observable<firebase.User> ;
// 修改后的写法
user$:Observable<firebase.User | null> ;

后续使用user$的时候，做好空值判断即可。

• 方案2：过滤null值+类型断言
  如果你业务逻辑中确定只需要处理用户已登录的场景，不需要响应未登录的null状态，可以用rxjs的filter操作符过滤null值后再加类型断言：
  首先导入需要的操作符：

import { filter } from 'rxjs/operators';

然后修改构造函数中的赋值逻辑：

constructor(private afAuth: AngularFireAuth) { 
  this.user$ = afAuth.authState.pipe(
    filter(user => user !== null)
  ) as Observable<firebase.User>;
}

• 方案3：非空断言（不推荐，存在运行时风险）
  如果你完全确定authState永远不会返回null，可以用非空断言跳过TS类型校验：

user$:Observable<firebase.User!> ;

这个方案相当于手动关闭了TS的空值校验，如果后续实际返回null会引发运行时错误，谨慎使用。

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