Angular Fire Auth页面刷新后无法获取Firestore用户数据问题

背景 #

我使用Firebase Authentication实现了邮箱密码注册登录功能，登录函数运行正常，登录后执行了以下代码：

await setPersistence(this.auth, browserLocalPersistence);

创建新用户后将用户数据保存至Firestore的操作也正常。

问题描述 #

在auth.service.ts中，我尝试通过auth.currentUser获取Firestore中的用户文档，开发者工具确认持久化功能正常，始终能正确获取到currentUser。

最初的实现代码如下：

this.auth.onAuthStateChanged(user => {
  console.log('FIRE AUTH ON AUTH STATE CHANGED RUNNING', user);
  if (user) {
    this.user$ = of(user).pipe(
      switchMap(async user => {
        try {
          const res = await getDoc(doc(this.db, 'users', user.uid));
          console.log(res.data());
          return res.data() as FireUser;
        } catch (error) {
          console.error(error);
          return null;
        }
      })
    );
  } else {
    this.user$ = of(null);
  }
});  

登录后这段代码运行正常，但页面刷新后（仍能正确获取currentUser），代码无法进入switchMap，且无任何报错。我已在onAuthStateChanged开头打印user，确认其值正确。

我还尝试过另一种写法：

onAuthStateChanged(this.auth, user => {
  console.error('USER IS', user);
  if (user) {
    this.user$ = docData(
      doc(this.db, 'users', user.uid)
    ) as Observable<FireUser>;
  } else {
    this.user$ = of(null);
  }
});

组件中通过以下方式展示user$数据：
TS代码：

user$ = this.fireAuthService.user$;  

HTML代码：

<div *ngIf="user$ | async as user">
  <pre>
   {{ user | json }}
 </pre>
</div>

请问问题出在哪里？

最终解决方案 #

基于@Werner7的回答，修改后的代码如下：

private userSubject$ = new BehaviorSubject<FireUser>(null);

get user$(): Observable<FireUser> {
  return this.userSubject$.asObservable();
}

onAuthStateChanged(this.auth, async user => {
  console.error('USER IS', user);
  if (user) {
    this.userSubject$.next(
      (await getDoc(doc(this.db, 'users', user.uid))).data() as FireUser
    );
  } else {
    this.userSubject$.next(null);
  }
});

内容的提问来源于stack exchange，提问作者Máté Antal