如何让console.log等待上方Firestore异步查询操作完成后再执行

firestore.collection("users").get() 是异步IO操作，返回Promise对象，不会阻塞后续同步代码的执行，因此写在.then()外部的console.log(users)会在数据库查询返回结果之前运行，此时users还未被赋值，所以输出undefined。

给事件回调函数添加async标识，使用await等待异步查询完成后再执行后续逻辑，改造后代码如下：

document.querySelector("#form1").addEventListener("submit", async e => {
    e.preventDefault();
    // 等待Firestore查询完成后再往下执行
    const querySnapshot = await firestore.collection("users").get();
    const users = querySnapshot.docs.map(doc => doc.data());
    console.log(users); // 原逻辑第一个打印
    console.log(users); // 原逻辑第二个打印，此时已拿到完整的users数据
});

当前实现需要拉取users集合的全量数据做用户名校验，当用户量较大时会产生不必要的性能损耗，建议直接通过条件查询判断用户名是否存在，无需拉取所有用户数据：
假设用户表中存储用户名的字段为username，用户提交的用户名存入变量inputUsername，可按如下方式实现：

const inputUsername = e.target.username.value; // 替换为你实际取表单用户名的逻辑
const usernameQuery = firestore.collection("users").where("username", "==", inputUsername).limit(1);
const querySnapshot = await usernameQuery.get();
const isUsernameExist = !querySnapshot.empty; // 直接得到用户名是否已存在的结果

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