Angular中authState返回空对象，无法显示登录用户信息求助

我在Angular项目中尝试展示登录用户的信息（用户名或邮箱均可），但遇到以下问题：

• 使用 <a> Hello {{ user.displayName }} </a> 时仅显示“Hello ”，displayName 内容不显示
• 直接展示完整对象 {{ user }} 时显示 [Object object]
• 执行 console.log(this.currentUser$) 后，得到一个原型为Object、length为1且name为空的对象，且 authState(this.auth) 返回空对象

相关代码 #

search.component.ts #

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';
import { authState, Auth } from '@angular/fire/auth';
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
})
export class SearchComponent implements OnInit {
  constructor(private router: Router, private authService: AuthService, private auth: Auth) {}

  currentUser$ = authState(this.auth);

  ngOnInit(): void {
    console.log(this.currentUser$);
  }

  doSearch(value: string) {
    console.log(`value=${value}`);
    this.router.navigateByUrl(`/search/${value}`);
  }

  signOut(){
    this.authService.signOut();
  }
}

search.component.html #

<a *ngIf="currentUser$ | async as user; else loginButton" >
   Hello {{ user }} <!-- to display email is {{ user.displayName }} -->
</a>
<ng-template #loginButton>
   <button class="au-btn-security" routerLink="/login">Log in</button>
   <button class="au-btn-sec" routerLink="/register">Register</button>
</ng-template>
<button class="au-btn-sec" (click)="signOut()">Sign Out</button>

解决方案 #

1. 查看用户对象真实结构
   将HTML中的 {{ user }} 替换为 {{ user | json }}，这样可以打印出用户对象的完整JSON结构，确认实际存在的属性（比如是否有displayName，还是应该用email）。

2. 正确获取用户流数据
   authState(this.auth) 返回的是Observable对象，直接console.log(this.currentUser$)只会打印Observable本身，而非用户数据。需要订阅流来获取真实用户信息：

   ngOnInit(): void {
     this.currentUser$.subscribe(user => {
       console.log('当前用户数据:', user);
     });
   }
   

3. 确认登录状态与Auth初始化
   如果authState返回空对象，需检查：

   • Firebase Auth是否已正确配置
   • 用户是否完成了完整的登录流程
   • 组件初始化时Firebase Auth是否已完成初始化

4. 使用正确的属性字段
   若用户通过邮箱密码登录，displayName可能为空（除非主动设置过），可以改用email字段展示：

   Hello {{ user.email }}
   

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