Firebase async/await在forEach循环中无法返回完整结果问题
问题原因
- 核心为异步执行时序错误:代码中
await仅等待了第一层表单查询query.get()的执行完成,内层遍历listIDs时触发的所有列表库查询都是独立异步任务,没有做等待处理就直接执行了forms.formLists = lists、data.push(forms)逻辑,此时内层数据库查询还未返回结果,lists数组为空,最终得到的data自然没有第二层的处理结果。 - 前端看似运行正常的本质:前端事件循环机制下,你大概率是在所有异步查询全部执行完成后才查看/使用
data变量(比如后续UI渲染触发时异步任务已全部跑完),所以能拿到完整数据,但前端版本的代码实际也存在同样的时序缺陷,只是没有触发异常表现。 - 额外隐藏问题:原代码中
lists变量定义在全局作用域,若查询到多个表单,不同表单的列表数据会互相污染,即使解决异步问题也会得到错误结果。
修复方案
将内层所有异步查询收集为Promise数组,通过Promise.all等待全部执行完成后再组装数据,同时调整lists变量的作用域避免数据污染,修复后代码如下:
let data = []; const userId = request.params.userId; const coll = db.collection("forms"); const query = coll.where("formUser", "==", userId); const querySnapshot = await query.get(); // 遍历表单查询结果,for of支持内部await时序控制 for (const doc of querySnapshot.docs) { const forms = doc.data(); const listIDs = forms.formLists; // 收集所有列表查询的Promise实例 const listQueryPromises = listIDs.map(listId => { return db.collection("lists").where("listId", "==", listId).get(); }); // 等待所有列表查询全部执行完成 const listSnapshots = await Promise.all(listQueryPromises); // 每个表单单独维护自己的lists数组,避免数据污染 const lists = []; listSnapshots.forEach(snapshot => { snapshot.forEach(d => { lists.push({ "id": d.data().listId, "text": d.data().listName }); }); }); forms.formLists = lists; data.push(forms); }
修复核心调整点:
- 移除嵌套
then回调,改用平级await写法,逻辑更易维护 - 将
lists变量移动到单个表单的处理逻辑内部,确保不同表单的列表数据隔离 - 用
map收集所有内层列表查询的Promise,通过await Promise.all等待全部查询完成后再组装数据 - 用
for...of遍历替代forEach,避免forEach不支持内部await时序控制的问题
内容的提问来源于stack exchange,提问作者Shina
相关产品推荐
相关产品推荐

