如何在type为module的script标签中正确实现调用Firebase setDoc的async函数

核心矛盾原因：type="module"的script标签默认是模块私有作用域，你在内部定义的顶层函数不会暴露到全局window，所以HTML内联的onclick事件找不到对应函数；而非module的script标签无法使用ES模块导入语法，自然拿不到Firebase的方法。
你可以从两种方案里选一种实现，所有逻辑都可以放在同一个module脚本内，不需要拆分多个script标签：

方案1：手动挂载函数到全局（适配你原来的内联onclick写法） #

直接在module脚本里把需要全局调用的save函数挂载到window对象上，代码示例如下：

<!-- 按钮写法和你原来一致即可 -->
<button onclick="save()">保存数据</button>

<script type="module">
  // 你原来的Firebase导入逻辑，这里用firestore的CDN导入为例
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
  import { getFirestore, setDoc, doc } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js";
  
  // 初始化Firebase的逻辑保持不变
  const firebaseConfig = {
    // 你的Firebase配置项
  };
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  // 关键：把save函数挂载到window对象，变成全局可访问
  window.save = async function() {
    try {
      // 正常await调用setDoc即可
      await setDoc(doc(db, "你的集合名", "你的文档ID"), {
        // 你要保存的字段数据
      });
      console.log("数据保存成功");
    } catch (err) {
      console.error("保存出错：", err);
    }
  }
</script>

方案2：移除内联onclick，在module脚本内绑定事件（更推荐，无全局污染） #

不使用HTML的onclick属性，直接在module脚本内选中按钮绑定异步点击事件，符合现代前端编码规范：

<!-- 给按钮加ID选择器，去掉onclick属性 -->
<button id="saveBtn">保存数据</button>

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
  import { getFirestore, setDoc, doc } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js";
  
  const firebaseConfig = {
    // 你的Firebase配置项
  };
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  // 选中按钮绑定异步点击回调
  const saveBtn = document.querySelector('#saveBtn');
  saveBtn.addEventListener('click', async () => {
    try {
      await setDoc(doc(db, "你的集合名", "你的文档ID"), {
        // 你要保存的字段数据
      });
      console.log("数据保存成功");
    } catch (err) {
      console.error("保存出错：", err);
    }
  })
</script>

内容的提问来源于stack exchange，提问作者M. Fil