Angular组件中BehaviorSubject订阅回调未触发问题求助

核心问题：Firebase初始化顺序错误 #

构造函数中先调用了loadDataAndPublish()，此时this.db还未被赋值（Firebase App和Firestore实例还没初始化），导致loadDataAndPublish内的collection(this.db, "users")执行失败，无法获取数据，自然无法触发_items.next(users)更新订阅。

修复步骤： #

1. 调整构造函数内的执行顺序
   将Firebase初始化代码移到loadDataAndPublish()调用之前，确保this.db已初始化：

constructor() {
  // 先初始化Firebase
  const app = initializeApp(credentials.firebase)
  this.db = getFirestore(app)
  this.usersRef = collection(this.db,'users')
  
  // 再加载数据
  this.loadDataAndPublish()

  this.items.subscribe(items=>{ // 测试订阅触发情况
    console.log("observing in service",items)
  })
}

2. 修正Firestore文档ID的获取逻辑
   populateItems中混淆了Firestore和实时数据库的文档ID获取方式，Firestore文档ID是snap.id，而非snap.key，修改如下：

populateItems = async (UsersListSnapshot) => {
  this.items_list = [];
  UsersListSnapshot.forEach(snap => {
    const user = new UserModel(undefined, snap.id).load(snap.data()).setKey(snap.id)
    this.items_list.push(user);
  });
  return this.items_list
}

3. 组件订阅正确的Observable
   服务已暴露封装好的items Observable，组件应订阅这个而非直接访问_items，符合封装原则：

this.service.items.subscribe(items=> {
  console.log("observing items",items)
})

4. 处理onAuthStateChanged的user为null场景（可选）
   当用户未登录时，user参数为null，此时可以清空用户列表或做对应处理，避免逻辑停滞：

loadDataAndPublish() {
  const auth = getAuth();
  onAuthStateChanged(auth,async (user) => {
    if (!user) {
      // 用户未登录时清空列表
      this._items.next([])
      return
    }
    const q = query(collection(this.db,"users"))
    const querySnapshot = await getDocs(q)
    const users =await this.populateItems(querySnapshot)
    console.log("items to publish",users)
    this._items.next(users)
  });
}

验证方法 #

修改后检查控制台：

• 服务内的console.log("items to publish",users)应输出正确的用户列表
• 服务内的console.log("observing in service",items)会先输出初始空数组，再输出新的用户列表
• 组件内的console.log("observing items",items)也会收到两次数据：初始空数组和更新后的用户列表

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