使用AngularFire2查询Firestore时出现异常行为

首先明确：Firestore 确实具备客户端缓存机制——默认情况下，Web SDK会自动缓存查询结果和文档数据，当你再次执行相同查询时，会先返回缓存数据，再同步服务器的最新数据。但你遇到的这个异常，核心原因并不是缓存本身，而是代码中订阅处理的问题，或是查询实例被意外复用导致的。

为什么会出现这个问题？ #

看你的代码细节：

• 第一个组件的查询用了.first()操作符，这意味着订阅会在获取到第一个值后自动完成并取消订阅。
• 第二个组件的查询没有使用.first()，订阅会持续监听数据变化。

当你导航回第一个组件时，组件重新初始化却返回第二个组件的查询结果，大概率是以下原因：

1. 订阅未彻底清理：虽然.first()会自动完成订阅，但如果组件存在路由复用、全局服务订阅泄漏等情况，可能导致旧的查询上下文干扰新的查询。
2. 查询实例意外复用：理论上不同条件的查询是独立的，但极端场景下AngularFire的查询引用可能出现缓存键冲突，导致查询结果被混淆。

解决步骤 #

尝试以下方法逐步修复：

1. 手动管理订阅，确保组件销毁时清理
   即使使用了.first()，也建议显式管理订阅，避免潜在的泄漏问题：

import { Subscription } from 'rxjs';

private querySub: Subscription;

ngOnInit() {
  this.querySub = this.afs.collection('user_previews', ref => 
    ref.where('location', '==', 'bar')
  )
  .valueChanges()
  .first()
  .subscribe(snap => console.log(snap));
}

ngOnDestroy() {
  this.querySub?.unsubscribe();
}

2. 临时禁用本地缓存排查问题
   为了确认是否是缓存导致的冲突，可以在查询中强制禁用本地缓存，直接从服务器获取数据：

this.afs.collection('user_previews', ref => 
  ref.where('location', '==', 'bar')
)
.valueChanges({ enableLocalCache: false }) // 禁用本地缓存
.first()
.subscribe(snap => console.log(snap));

如果这样问题消失，说明缓存被意外复用，需要进一步检查是否有动态变量污染了查询条件。

3. 替换first()为take(1)
   虽然两者功能类似，但take(1)在某些场景下的行为更稳定，能严格获取第一个值后完成订阅：

import { take } from 'rxjs/operators';

this.afs.collection('user_previews', ref => 
  ref.where('location', '==', 'bar')
)
.valueChanges()
.pipe(take(1))
.subscribe(snap => console.log(snap));

4. 检查查询条件是否存在变量污染
   确认两个组件的查询条件没有依赖同一个全局变量或服务变量，避免出现条件被意外覆盖的情况。

总结 #

Firestore的缓存机制本身是可靠的，它会根据「集合路径+查询条件」的唯一标识维护独立缓存条目。你遇到的问题更可能是订阅管理不当或代码变量污染导致的，按照上述步骤排查应该能解决。

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