开启持久化后Angular Firestore刷新无法读取缓存数据

问题背景 #

• 技术栈：Angular 15.2.0 + Angular Fire 7.5.0（Firebase 9）
• 模块结构：
  • AppModule（根模块）
  • LoginModule（懒加载，路由守卫：canActivate(() => redirectLoggedInTo(['']))）
  • HomeModule（懒加载，路由守卫：canActivate(() => redirectUnauthorizedTo(['/login']))）
• Firestore配置（AppModule中）：

provideFirestore(() => {
  console.log('providing from AppModule');
  const firestore = initializeFirestore(getApp(), {
    ignoreUndefinedProperties: true,
    cacheSizeBytes: CACHE_SIZE_UNLIMITED
  });
  enableIndexedDbPersistence(firestore).then(() => console.log('provided')).catch((err) => {
    if (err.code == 'failed-precondition') {
      console.error('Multiple tabs open, persistence can only be enabled in one tab at a time.')
    } else if (err.code == 'unimplemented') {
      console.error('The current browser does not support all of the features required to enable persistence');
    }
  });
  return firestore;
}),

• 数据读取逻辑：

const q = query(
  collection(getFirestore(), 'myCollection'),
  where('_userId', '==', getAuth().currentUser?.uid),
  orderBy('id', 'asc')
);

// 从缓存读取数据
getDocsFromCache(q);

// 若查询快照为空，则从服务器读取
getDocsFromServer(q);

核心现象 #

1. 首次加载：provideFirestore日志正常打印，持久化开启成功，HomeModule可正常读写缓存
2. 页面刷新后：
   • provideFirestore日志不再输出
   • IndexedDB中缓存数据存在，但getDocsFromCache始终返回空结果
   • 所有请求强制走服务器，新数据无法写入缓存
   • 手动登出再登录后，缓存功能恢复正常

可能原因与解决方案 #

1. Firestore实例初始化时机与路由守卫冲突 #

刷新后路由守卫可能在Firestore持久化完成前就触发数据请求，导致缓存未绑定到当前实例。

解决步骤：

• 将Firestore提供者改为异步初始化，确保Angular等待持久化完成后再注入实例：

provideFirestore(() => {
  console.log('providing from AppModule');
  const firestore = initializeFirestore(getApp(), {
    ignoreUndefinedProperties: true,
    cacheSizeBytes: CACHE_SIZE_UNLIMITED
  });
  // 返回Promise，等待持久化完成后再提供实例
  return enableIndexedDbPersistence(firestore)
    .then(() => {
      console.log('persistence enabled, firestore provided');
      return firestore;
    })
    .catch((err) => {
      if (err.code == 'failed-precondition') {
        console.error('Multiple tabs open, persistence can only be enabled in one tab at a time.');
      } else if (err.code == 'unimplemented') {
        console.error('The current browser does not support all features required for persistence');
      }
      return firestore;
    });
}),

• 修改路由守卫，等待Auth状态就绪后再处理导航：

// HomeModule路由守卫实现
canActivate(): Observable<boolean | UrlTree> {
  return getAuthState(getAuth()).pipe(
    take(1),
    map(user => {
      return user ? true : router.parseUrl('/login');
    })
  );
}

2. Auth状态异步导致查询上下文不匹配 #

刷新后getAuth().currentUser可能未就绪，导致创建的查询携带undefined的_userId条件，后续即使Auth状态就绪，缓存的查询上下文也无法匹配。

解决步骤：

• 监听Auth状态，在用户就绪后再创建查询：

// Home组件中
user$ = getAuthState(getAuth());

data$ = this.user$.pipe(
  filter(user => !!user),
  switchMap(user => {
    const q = query(
      collection(getFirestore(), 'myCollection'),
      where('_userId', '==', user.uid),
      orderBy('id', 'asc')
    );
    // 优先尝试缓存，失败则走服务器
    return getDocsFromCache(q).pipe(
      catchError(() => getDocsFromServer(q)),
      map(snapshot => snapshot.docs.map(doc => doc.data()))
    );
  })
);

3. Firestore实例单例性被破坏 #

懒加载模块可能意外创建了新的Firestore实例，导致持久化只绑定到首次加载的实例，刷新后使用的是未开启持久化的实例。

验证与解决：

• 在HomeModule组件中注入Firestore实例并打印引用，对比AppModule中创建的实例是否一致：

// HomeComponent构造函数
constructor(private firestore: Firestore) {
  console.log('HomeModule Firestore instance:', firestore);
}

• 确保只有AppModule中配置provideFirestore，懒加载模块不要重复提供Firestore相关依赖。

4. 持久化预条件冲突 #

刷新过程中旧Firestore实例未完全销毁，导致新实例开启持久化时触发failed-precondition错误（但未被捕获到有效日志）。

解决步骤：

• 初始化前检查持久化状态，避免重复开启：

// 在enableIndexedDbPersistence前添加检查
const persistenceEnabled = await isPersistenceEnabled(firestore);
if (!persistenceEnabled) {
  await enableIndexedDbPersistence(firestore);
}

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