AngularFire2/Firestore valueChanges()有数据却返回null问题

我之前开发AngularFire项目时也碰到过一模一样的情况！隐身模式首次加载返回null，刷新就正常，大概率是Firebase身份验证的初始化时机滞后导致的——隐身模式下浏览器没有缓存，Firebase Auth的状态需要重新加载，而你的Firestore请求可能在Auth状态就绪前就发起了，被安全规则拦截后返回null。

下面是我亲测有效的解决步骤：

1. 等待Auth状态稳定后再请求数据 #

AngularFireAuth提供了authState observable，可以监听用户认证状态的变化。我们可以用它来确保只有在用户认证状态明确后，才去请求Firestore数据：

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { switchMap, of } from 'rxjs';

@Component({ /* 组件配置 */ })
export class YourComponent implements OnInit {
  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {}

  ngOnInit(): void {
    this.afAuth.authState.pipe(
      switchMap(user => {
        // 只有当用户认证状态存在时，才请求Configs文档
        if (user) {
          return this.afs.collection('Configs').doc('目标文档ID').valueChanges();
        } else {
          // 未认证场景根据业务需求处理，这里返回空值示例
          return of(null);
        }
      })
    ).subscribe(config => {
      console.log('获取到的配置数据:', config);
      // 这里处理拿到的数据
    });
  }
}

2. 检查Firestore安全规则 #

如果你的安全规则要求用户必须认证才能读取Configs集合，那首次加载时Auth未就绪的请求就会被拒绝，返回null。可以临时修改规则测试（上线前一定要改回安全的配置）：

service cloud.firestore {
  match /databases/{database}/documents {
    match /Configs/{document=**} {
      allow read: if true; // 临时开放读取权限，验证是否是规则问题
      allow write: if request.auth != null;
    }
  }
}

如果修改后首次加载能正常拿到数据，就坐实了是Auth时机+规则的问题，回到第一个方案即可解决。

3. 关于AngularFire版本的建议 #

你用的5.0.0-rc.4是比较早期的版本，虽然核心逻辑没问题，但后续版本修复了不少初始化相关的小bug。如果上面的方案效果不佳，可以考虑升级到稳定版（注意要和你的Angular版本兼容，比如Angular 14+对应AngularFire 7.x）。

针对snapshotChanges的写法 #

如果你习惯用snapshotChanges获取文档，写法类似，同样要绑定Auth状态：

this.afAuth.authState.pipe(
  switchMap(user => {
    if (user) {
      return this.afs.collection('Configs').doc('目标文档ID').snapshotChanges();
    }
    return of(null);
  })
).subscribe(action => {
  if (action) {
    const configData = action.payload.data() as Config;
    const docId = action.payload.id;
    console.log('文档ID:', docId, '数据:', configData);
  }
});

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