Firebase代码在head标签外运行报错，如何解决？

针对普通<script>标签的错误（await仅在async环境有效） #

直接在<script>顶层使用await会触发语法错误，因为await只能在async函数、异步生成器或模块顶层中使用。解决方法是将数据库操作包裹进一个async函数，然后主动调用该函数：

<body>
  <script>
    // 确保已提前初始化Firebase App和Firestore实例（变量db）
    async function insertDocument() {
      try {
        // 替换为你的集合名、文档ID和业务数据
        await setDoc(doc(db, "users", "user123"), {
          username: "test_user",
          email: "test@example.com"
        });
        console.log("文档插入成功");
      } catch (error) {
        console.error("插入失败：", error);
      }
    }
    // 执行插入逻辑
    insertDocument();
  </script>
</body>

针对<script type='module'>标签的错误（setDoc未定义） #

使用模块模式时，必须显式导入Firebase的相关模块，否则浏览器无法识别setDoc等方法。正确实现如下：

<body>
  <script type="module">
    // 导入Firebase核心和Firestore模块（版本号可根据项目需求调整）
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
    import { getFirestore, doc, setDoc } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js";

    // 你的Firebase项目配置信息
    const firebaseConfig = {
      apiKey: "你的API_KEY",
      authDomain: "你的AUTH_DOMAIN",
      projectId: "你的PROJECT_ID",
      storageBucket: "你的STORAGE_BUCKET",
      messagingSenderId: "你的MESSAGING_SENDER_ID",
      appId: "你的APP_ID"
    };

    // 初始化Firebase应用和Firestore实例
    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    // 异步执行文档插入
    async function insertDocument() {
      try {
        await setDoc(doc(db, "users", "user123"), {
          username: "test_user",
          email: "test@example.com"
        });
        console.log("文档插入成功");
      } catch (error) {
        console.error("插入失败：", error);
      }
    }

    insertDocument();
  </script>
</body>

关键注意事项 #

• 若使用Firebase旧版命名空间写法（如firebase.firestore()），需确保已加载完整的Firebase SDK脚本，此时setDoc对应的是db.collection().doc().set()方法。
• 无论采用哪种方式，都要保证Firebase App和Firestore实例已完成初始化，避免因实例未创建引发额外错误。

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