启用离线持久化的Firestore监听器为何总是从服务器读取数据？

一、首次监听器触发两次回调的原因 #

你设置了includeMetadataChanges: true，这个配置会让onSnapshot在元数据变化时也触发回调，而非仅在数据变化时触发：

• 首次触发：读取本地缓存，此时fromCache: true
• 第二次触发：Firestore完成与服务器的同步后，确认数据无变化，但元数据更新为fromCache: false，因此触发第二次回调。
  这是SDK的设计行为，并非异常。

二、后续回到组件每次读取服务器的原因 #

每次切换回组件时，都会重新调用useLoadWebsite，创建一个全新的onSnapshot订阅。Firestore的实时订阅默认逻辑是：新订阅启动时，会先与服务器同步以确保数据最新，即使本地缓存存在且数据未变更。
同时，你没有在组件销毁时取消旧订阅，这不仅会导致重复请求，还可能引发内存泄漏。

三、修复方案 #

1. 移除不必要的元数据变更回调（解决首次两次触发问题） #

如果不需要监听元数据变化，删除includeMetadataChanges: true配置。此时若服务器数据与缓存一致，onSnapshot只会触发一次缓存数据的回调。

修改后的src/composables/database.ts：

export const useLoadWebsite = () => {
  const q = query(
    collection(db, 'websites'),
    where('userId', '==', 'NoLTI3rDlrZtzWCbsZpPVtPgzOE3')
  );
  const firestoreWebsite = ref<DocumentData>();
  // 移除includeMetadataChanges配置
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const source = querySnapshot.metadata.fromCache ? 'local cache' : 'server';
    console.log('Data came from ' + source);
    const colArray: DocumentData[] = [];
    querySnapshot.docs.forEach((doc) => {
      colArray.push({ ...doc.data(), id: doc.id });
    });
    firestoreWebsite.value = colArray[0];
  });

  // 组件销毁时取消订阅，避免内存泄漏
  onUnmounted(() => {
    unsubscribe();
  });

  return firestoreWebsite;
};

2. 复用订阅或缓存结果（解决后续每次读服务器问题） #

如果希望在组件切换时保持订阅复用，避免每次重新同步服务器，可以在composable中缓存订阅实例和数据，确保同一查询只创建一次订阅：

// 缓存订阅和数据，避免重复创建
const websiteCache = {
  data: ref<DocumentData | undefined>(undefined),
  unsubscribe: null as (() => void) | null
};

export const useLoadWebsite = () => {
  const q = query(
    collection(db, 'websites'),
    where('userId', '==', 'NoLTI3rDlrZtzWCbsZpPVtPgzOE3')
  );

  // 如果已有订阅，直接返回缓存数据
  if (!websiteCache.unsubscribe) {
    websiteCache.unsubscribe = onSnapshot(q, (querySnapshot) => {
      const source = querySnapshot.metadata.fromCache ? 'local cache' : 'server';
      console.log('Data came from ' + source);
      const colArray: DocumentData[] = [];
      querySnapshot.docs.forEach((doc) => {
        colArray.push({ ...doc.data(), id: doc.id });
      });
      websiteCache.data.value = colArray[0];
    });

    // 应用卸载时取消订阅（可根据路由管理逻辑调整时机）
    onUnmounted(() => {
      websiteCache.unsubscribe?.();
      websiteCache.unsubscribe = null;
    });
  }

  return websiteCache.data;
};

3. 强制使用缓存（极端场景） #

如果确实需要完全优先使用缓存，且不需要实时同步能力，可以改用getDocs结合source: 'cache'配置，缓存无数据时再降级到服务器：

export const useLoadWebsite = async () => {
  const q = query(
    collection(db, 'websites'),
    where('userId', '==', 'NoLTI3rDlrZtzWCbsZpPVtPgzOE3')
  );
  const firestoreWebsite = ref<DocumentData>();
  
  try {
    // 优先从缓存读取
    const querySnapshot = await getDocs(q, { source: 'cache' });
    const colArray: DocumentData[] = [];
    querySnapshot.docs.forEach((doc) => {
      colArray.push({ ...doc.data(), id: doc.id });
    });
    firestoreWebsite.value = colArray[0];
  } catch (e) {
    // 缓存无数据时，从服务器获取
    const querySnapshot = await getDocs(q);
    const colArray: DocumentData[] = [];
    querySnapshot.docs.forEach((doc) => {
      colArray.push({ ...doc.data(), id: doc.id });
    });
    firestoreWebsite.value = colArray[0];
  }

  return firestoreWebsite;
};

关键说明 #

• Firestore实时监听器的核心设计是保持数据与服务器同步，因此新订阅默认会与服务器校验数据。复用订阅是减少服务器请求的最优方案。
• 离线持久化仅保证离线时能读取缓存，在线时Firestore仍会尝试同步服务器数据，除非明确指定缓存优先。

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