React环境调用Firestore setDoc方法报“Unexpected reserved word 'await'”错误

错误原因 #

await 是只能在 async 标记的异步函数内部使用的关键字，你当前定义的 sendMessage 是普通同步函数，因此直接调用 await 会触发保留字语法报错。
另外你当前代码还存在一个隐藏问题：代码中打印的 docRef 并未提前定义，修复完语法问题后运行还会抛出变量未定义的报错。

修复方案 #

直接给 sendMessage 函数添加 async 标记，同时补充 docRef 定义即可，修复后完整代码如下：

import { setDoc, doc } from "firebase/firestore";

// 函数前添加async关键字
const sendMessage = async (e) => {
    e.preventDefault();

    try {
      // 提前定义文档引用
      const docRef = doc(db, "messages", "test");
      await setDoc(
        docRef,
        {
          firstName: firstName,
          lastName: lastName,
          email: email,
          phoneNumber: phoneNumber,
          message: message,
          created: Date.now(),
        }
      );
      console.log("Document written with ID: ", docRef.id);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
}

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