ReactJS：用于获取数据的等待函数 returns 一个未决的承诺

Question

我正在尝试从 firebase 数据库感染数据。

但是，我有子集合，所以我需要先获取文档的 ID，然后再获取子集合中的文档：

集合 --> 文档 --> 子集合 --> 文档

我用这个：

  const [data, setData] = useState([]);

  useEffect(() => {
    const fecthData = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, "users"))
        querySnapshot.forEach((doc) => {
          console.log(doc.id, "=>", doc);
          var querySnap = await getDocs(collection(db, `users/${doc.id}/general`))
          console.log(querySnap)
        });
      }catch(err) {
        console.log(err)
      }
    };
    fecthData();
  }, []);

这 return 是以下错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: F:\panel_admin\src\pages\Management.js: Unexpected reserved word 'await'. (26:26)

删除“await”是否 return 将所需的数据放入待处理的承诺中？我怎样才能像第一个文档一样正常获取数据？

Answer 1

使用for...of。问题是 forEach((doc) 函数不是 async。

  useEffect(() => {
    const fetchData = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, "users"))
        let allDocs = [];
        querySnapshot.forEach((doc) => {
          allDocs.push({...doc.data(), id: doc.id});
        })
        for (const item of allDocs) {
          const querySnap = await getDocs(collection(db, `users/${item.id}/general`))
          console.log(querySnap)
        }

    }catch(err) {
        console.log(err)
      }
    };
    fetchData();
  }, []);

ReactJS：用于获取数据的等待函数 returns 一个未决的承诺

ReactJS: await function for fetching data returns a pending promise

promise

async-await

firebase

reactjs

google-cloud-firestore