Vue.js 3 向Firebase添加商品时触发Unexpected reserved word语法错误

这个报错属于JavaScript基础语法错误，和Firebase服务可用性无关：

• await关键字的使用有严格语法限制，只能在被async标记的异步函数内部使用。当前代码中saveData是普通的同步方法，直接在函数内部使用await调用Firestore的addDoc方法，JS引擎解析代码时会判定为非法使用保留字，直接抛出语法错误，导致整个组件的CRUD逻辑无法执行。
• Authentication模块能正常运行，是因为对应模块代码不存在这类语法问题，不会被该解析错误阻断。

只需要给saveData方法添加async关键字，标记为异步函数即可，修改后完整代码如下：

import { db } from '../main';
import { collection, addDoc } from "firebase/firestore";

export default {
  name: "Products",
  props: {
    msg: String
  },
  data() {
    return {
      product: {
        name: null,
        price: null
      }
    }
  },
  methods: {
    // 新增async关键字标记异步函数
    async saveData() {
      try {
        const docRef = await addDoc(collection(db, "products"), this.product);
        console.log("Document written with ID: ", docRef.id);
      } catch (e) {
        console.error("Error adding document: ", e);
      }
    }
  }
};

修改保存后刷新页面，原语法错误会直接消失。如果后续操作时出现权限类报错，再检查Firebase控制台的Firestore安全规则配置即可，和当前语法问题无关。

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