Angular5+Firebase项目中无法获取Firebase对象值的问题

我来帮你排查下这个问题，你的代码里有几个关键细节需要调整，才能正确从Firebase实时数据库获取当前用户数据：

问题分析 #

1. first()操作符限制了状态监听：你的isLoggedIn()方法用了first()，这只会获取一次认证状态，之后用户登录/登出的状态变化不会触发更新，导致用户状态改变后无法重新获取数据。
2. current的类型和赋值逻辑混乱：当用户登录时你把current设为valueChanges()返回的Observable，但未登录时设为null，这会导致类型不一致，而且如果组件中直接使用current，很可能没有正确订阅这个Observable。
3. 未处理订阅清理：构造函数中的订阅没有保存引用，可能会造成内存泄漏。

修正后的服务代码 #

我们可以用RxJS的switchMap来组合认证状态流和用户数据流，同时保持类型统一，持续监听状态变化：

import { Injectable, OnDestroy } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable, of, Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// 先定义用户类型，让类型更安全
export interface AppUser {
  uid: string;
  name?: string;
  email?: string;
  // 根据你的数据库结构添加其他字段
}

@Injectable({ providedIn: 'root' })
export class CurrentService implements OnDestroy {
  // 用$后缀标识Observable，这是RxJS的通用惯例
  public currentUser$: Observable<AppUser | null>;
  private authSubscription: Subscription;

  constructor(
    private authFb: AngularFireAuth,
    private db: AngularFireDatabase
  ) {
    // 用switchMap切换流：当authState变化时，自动获取对应用户数据或返回null
    this.currentUser$ = this.authFb.authState.pipe(
      switchMap(user => {
        if (user) {
          // 用户已登录，返回实时数据库的用户对象Observable
          return this.db.object<AppUser>(`users/${user.uid}`).valueChanges();
        } else {
          // 用户未登录，返回null的Observable，保持类型统一
          return of(null);
        }
      })
    );

    // 如果需要在服务内部处理用户状态变化，保存订阅引用
    this.authSubscription = this.currentUser$.subscribe(user => {
      if (!user) {
        console.log("No user logged in");
      }
    });
  }

  // 服务销毁时取消订阅，避免内存泄漏
  ngOnDestroy() {
    this.authSubscription.unsubscribe();
  }
}

在组件中正确使用 #

在组件里，推荐用Angular的async管道来订阅Observable，它会自动处理订阅和取消订阅，避免手动管理的麻烦：

import { Component } from '@angular/core';
import { CurrentService } from './current.service';

@Component({
  selector: 'app-user-dashboard',
  template: `
    <div *ngIf="currentUser$ | async as user">
      <h3>Hi, {{ user.name }}!</h3>
      <p>Your UID: {{ user.uid }}</p>
    </div>
    <div *ngIf="!(currentUser$ | async)">
      <p>Please log in to view your profile.</p>
    </div>
  `
})
export class UserDashboardComponent {
  // 直接复用服务中的Observable
  currentUser$ = this.currentService.currentUser$;

  constructor(private currentService: CurrentService) {}
}

关键优化点总结 #

• 移除first()，让authState持续监听用户登录状态的变化；
• 用switchMap组合认证流和用户数据流，实现状态变化时自动更新数据；
• 统一currentUser$的类型为Observable<AppUser | null>，避免类型混乱；
• 使用async管道在模板中处理Observable，简化订阅逻辑并避免内存泄漏。

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