使用Google Firestore官方代码调用setDoc时触发await保留字语法错误

你遇到的Uncaught SyntaxError: Unexpected reserved word错误完全是await的使用场景不符合JS语法规范导致的，Firestore官方给出的示例通常会省略上下文环境，不能直接复制到任意环境运行。具体原因和对应解决方法如下：

• 最常见原因：你直接在普通脚本的顶层代码使用了await。目前只有当你的文件被标记为ES模块时，才支持顶级await语法，否则await只能在标注了async的函数内部使用。
  • 如果不想配置ES模块，把你的数据库操作代码包裹在异步函数中即可，示例如下：

  import { doc, setDoc } from "firebase/firestore"; 
  
  // 声明带async关键字的异步函数
  async function addLosAngelesData() {
    await setDoc(doc(db, "cities", "LA"), {
      name: "Los Angeles",
      state: "CA",
      country: "USA"
    });
  }
  
  // 调用异步函数执行操作
  addLosAngelesData();
  

  • 如果你要使用顶级await，需要做对应配置：
    • 前端原生开发场景：在HTML中引入该JS文件的<script>标签添加type="module"属性
    • Node.js开发场景：在项目的package.json文件中添加配置项"type": "module"
    • Vue/React等带构建工具的项目场景：需要额外在构建工具配置中开启顶级await语法支持
• 次要常见原因：你已经把await写在了函数内部，但忘记给对应函数添加async关键字声明，修正函数声明即可。

内容的提问来源于stack exchange，提问作者Mount Vesubio