页面刷新后Firestore getDocs无报错失效的原因排查

问题描述 #

使用代码从Firestore的items和ratings集合获取文档并填充至localStorage，首次加载时功能正常，但页面刷新后失效，控制台无报错信息，需排查原因，重点关注querySnapshot的await相关逻辑。

代码片段 #

// ----------> firebase vars <----------------------------------
initializeApp(firebaseConfig); 
export const db = getFirestore(); 
export const auth = getAuth();
export const colRefItems = collection(db, 'items');
export const colRefRating = collection(db, 'ratings');

// ----------> Sync - get VARS from firebase <----------------------------------
const lastUpdated = settings[0].firebase.updated;
const user = "xxxxxxxxx";

console.log('%cSYNC: Pre items load', 'color:#059f2d')
// ----------> Sync - get items from firebase <----------------------------------
const q2 = query(colRefItems, 
  where("created", ">=", lastUpdated), 
  where("user", "==", user), 
  orderBy("created")
)

const querySnapshot = await getDocs(q2).then().catch((e)=> console.log(e));
console.log('%cSYNC: After items await', 'color:#059f2d')

querySnapshot.forEach((doc) => {
  j++; let dataJk = {
    uid: doc.id, type: +doc.data().type, user: user, colour: +doc.data().colour, created: doc.data().created, desc: doc.data().desc
  }; itemListSync.push(dataJk)
});
if(j>0)localStorage.setItem('items',JSON.stringify(itemListSync));console.log('%cSYNC: '+itemListSync.length+' item(s) synced from Firestore', 'color:#059f2d')
console.log('%cSYNC: After items loop', 'color:#059f2d')

// ----------> Sync - get ratings from firebase <----------------------------------
const q3 = query(colRefRating,  
  where('created', '>=', lastUpdated), 
  where("user", "==", user),
  orderBy('created')
)
const querySnapshotRating = await getDocs(q3).then().catch((e)=> console.log(e));
console.log('%cSYNC: After ratings await', 'color:#059f2d')
querySnapshotRating.forEach((doc) => {
  k++; let ratingData = {
    uid: doc.id, rating: +doc.data().rating, created: doc.data().created, user: user
  }; itemRatingSync.push(ratingData)
});
if(k>0)localStorage.setItem('ratings',JSON.stringify(itemRatingSync));console.log('%cSYNC: '+itemRatingSync.length+' rating(s) synced from Firestore', 'color:#059f2d')
console.log('%cSYNC: After ratings loop', 'color:#059f2d')

排查方向与修复建议 #

1. 变量未初始化导致逻辑异常 #

代码中j、k、itemListSync、itemRatingSync无显式初始化：

• 首次加载时这些变量可能在其他逻辑中被初始化为0或空数组，但页面刷新后变量重置为undefined，导致j++变成NaN、数组push操作失效，最终无法触发localStorage更新。

修复： 在同步逻辑开始前添加变量初始化：

let j = 0;
let k = 0;
const itemListSync = [];
const itemRatingSync = [];

2. lastUpdated未同步更新 #

lastUpdated取自settings[0].firebase.updated，首次同步后如果未将最新的文档created时间更新到settings中：

• 刷新后lastUpdated仍为旧值，查询条件created >= lastUpdated会返回空结果，没有新数据写入localStorage，表现为功能失效。

修复： 同步完成后，将lastUpdated更新为本次同步到的最新文档的created时间，并持久化该设置（比如存入localStorage或Firestore）。

3. await与错误处理逻辑缺陷 #

代码中await getDocs(q2).then().catch(...)的写法存在问题：

• 若getDocs请求失败，catch捕获错误后返回undefined，此时querySnapshot为undefined，后续调用querySnapshot.forEach会抛出错误，但可能因日志级别或静默处理未在控制台显示。

修复： 用try/catch正确处理异步错误，避免undefined调用方法：

try {
  const querySnapshot = await getDocs(q2);
  console.log('%cSYNC: After items await', 'color:#059f2d')
  querySnapshot.forEach((doc) => {
    // 文档处理逻辑
  });
} catch(e) {
  console.error('获取items失败:', e);
  // 可添加失败回退逻辑，比如读取localStorage旧数据
}

4. Firebase重复初始化问题 #

直接调用initializeApp(firebaseConfig)，页面刷新后会重复初始化Firebase App，可能引发潜在连接问题：

修复： 检查App是否已初始化，避免重复调用：

import { initializeApp, getApps, getApp } from "firebase/app";

if (!getApps().length) {
  initializeApp(firebaseConfig);
}
const app = getApp();
const db = getFirestore(app);
// 其他Firebase服务初始化

5. 检查隐藏日志 #

即使控制台无报错，也可排查：

• 开启控制台"Verbose"日志级别，查看Firestore请求日志，确认刷新时是否有请求发送、返回结果是否为空。
• 打印lastUpdated在刷新前后的值，确认是否符合预期。

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