在循环 Firebase 中使用 getDoc().then()

Question

我试图循环遍历一个数组，对于数组中的每个元素，我想使用 getDoc() ，然后将文档的数据添加到新数组中。基本上要做到这一点：

useEffect(() => {
    let items = [];
    for(const cart_item of cartItems){
        getDoc(doc(getFirestore(), 'tickets', cart_item.ticket_id)).then((ticket_item) => {
            items.push({...ticket_item.data()});
        });
    }
    console.log(items);
}, [cartItems])

但是，在我记录它的循环之后，项目数组仍然为空。我认为问题在于循环没有等待 getDoc() 返回某些内容并继续下去。如何让它等待 getDoc() 完成？我一直在阅读有关 async,await 的内容，但我仍然不明白如何处理它。

Answer 1

尝试使用异步函数重构代码，如下所示：

useEffect(() => {
  const getItems = async () => {
    // fetching all documents by mapping an array of promises and using Promise.all()
    const itemsDocs = await Promise.all(cartItems.map(c => getDoc(doc(getFirestore(), 'tickets', c.ticket_id)))
    // mapping array of document data
    const items = itemsDocs.map(i => i.data())
    console.log(items);
  }
  getItems();
}, [cartItems])