Firebase v9使用官方示例代码报await为保留字问题如何解决

错误1：await is reserved word 报错原因 #

await 关键字仅可在被 async 标记的函数作用域内使用，你直接在全局作用域、普通同步函数中使用 await 就会触发该报错。

错误2：包裹async匿名函数后功能不生效原因 #

你只完成了异步函数的定义，没有触发函数执行，内部代码从未运行，自然没有对应效果。

修复方案 #

方案1：使用立即执行异步函数表达式（IIFE） #

适合直接在顶层作用域运行的场景，给定义好的匿名异步函数收尾加调用标记即可，代码示例如下：

// 注意末尾的()代表立即执行该函数
(async () => {
  try {
     const docRef = await addDoc(collection(db, "projects", vm.add.slug), {
      first: "Alan",
      middle: "Mathison",
      last: "Turing",
      born: 1912
    })
    console.log("Document written with ID: ", docRef.id)
  } catch (err) {
    // 注意这里原代码日志写的是「error deleting data」属于笔误，建议修正避免排查问题时被误导
    console.log("error adding document:", err)
  }
})()

方案2：绑定到对应触发逻辑 #

如果这段代码是需要在点击事件、框架生命周期等时机触发，直接把对应的处理函数标记为async即可，不需要额外嵌套匿名函数，示例如下（以Vue点击事件为例）：

// 提交表单时触发写入
const handleFormSubmit = async () => {
  try {
     const docRef = await addDoc(collection(db, "projects", vm.add.slug), {
      first: "Alan",
      middle: "Mathison",
      last: "Turing",
      born: 1912
    })
    console.log("Document written with ID: ", docRef.id)
  } catch (err) {
    console.log("error adding document:", err)
  }
}

额外排查点 #

如果修改后仍无法正常写入，可按顺序排查以下项：

• Firebase的db实例是否完成初始化
• Firestore的权限规则是否允许当前用户对目标路径执行写入操作
• collection(db, "projects", vm.add.slug) 路径是否符合你预期的集合结构

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