Angular Observable基础：Firebase Observable无数据返回问题排查

嘿，这种情况我在项目里碰到过好多次，大概率是Observable的订阅时机或者数据流状态出了问题，给你列几个最常见的排查方向，你可以对照着看看：

• 订阅时机与数据流类型不匹配
  Firebase提供的查询API分两种：单次获取（比如get()）和实时监听（比如onSnapshot()）。如果你的代码用的是get()返回的Observable，它是单次数据流——发出一次数据后就会完成（complete）。要是另一段代码在数据流完成之后才订阅，自然拿不到任何数据。
  举个例子：

  // 服务里的单次查询方法
  getUserData() {
    return from(this.firestore.collection('users').doc(uid).get());
  }
  
  // 这段在组件初始化时订阅，能拿到数据
  ngOnInit() {
    this.userService.getUserData().subscribe(data => console.log(data));
  }
  
  // 这段在按钮点击时订阅，此时数据流已经完成，拿不到数据
  onButtonClick() {
    this.userService.getUserData().subscribe(data => console.log(data)); // 无输出
  }
  

  解决办法是如果需要多次订阅或延迟订阅，改用onSnapshot()这类实时监听的API，或者用shareReplay()缓存数据流的结果。

• 订阅的Observable实例不一致
  要是你的服务方法每次调用都会返回全新的Observable实例，那两段代码订阅的可能是完全不同的数据流。比如另一段代码调用时，查询条件变了（比如uid传错了）、权限不足，或者网络状况变差，都会导致新的Observable拿不到数据。
  你可以检查两段代码调用的服务方法是否一致，传入的参数（比如文档ID、查询条件）是否完全相同。

• 缺失错误处理，报错没被发现
  很多时候不是没拿到数据，而是数据流抛出了错误（比如Firebase权限拒绝、网络中断），但那段代码没订阅错误回调，导致你看不到报错，误以为没数据。
  赶紧给那段代码加上错误处理：

  this.userService.getUserData().subscribe({
    next: data => console.log('拿到数据:', data),
    error: err => console.error('数据流出错:', err) // 一定要加这个！
  });
  

  大概率能看到问题所在。

• 操作符过滤/转换导致数据丢失
  对比两段代码的Observable操作符，是不是另一段加了filter()、map()这类操作，不小心把数据过滤掉或转换出问题了？比如filter(user => user.isActive)如果用户状态不是活跃，就会过滤掉所有数据；map(user => user.address.city)如果address是undefined，就会返回undefined。

• Angular场景下的Zone.js问题
  要是你用的是Angular，Firebase的某些异步操作可能跑出Angular的Zone，导致订阅回调里的代码执行了，但视图没更新（看起来像没拿到数据）。你可以在订阅里加个console.log(data)，确认数据是不是已经拿到了——如果日志有输出但视图没更，就用NgZone.wrap()把回调包起来。

先从加错误处理开始排查吧，这是最快找到问题的方法！

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