Web端Firebase模块已正确导入但无法使用，调用signInAnonymously报错

你遇到的问题核心是ES模块的作用域隔离：index.html中的模块脚本里定义的auth、database以及导入的Firebase函数，只能在该模块内部访问，作为独立模块的game.js无法直接引用这些变量和函数。

下面提供两种可行的解决方法：

方法一：在game.js中独立导入并初始化Firebase #

这是最规范的模块式开发方式，每个模块自行管理所需的依赖：

修改game.js代码如下：

// 导入所需的Firebase函数
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import { getAuth, signInAnonymously, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js";

// 复制你的Firebase配置（和index.html里的一致）
const firebaseConfig = {
    // 你的配置内容
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const database = getDatabase(app);

// 匿名登录，添加错误捕获便于排查问题
signInAnonymously(auth)
  .catch((error) => {
    console.error("匿名登录失败:", error);
  });

onAuthStateChanged(auth, (user) => {
    if (user) {
        console.log(user.uid);
        onValue(ref(database, 'boards/players'), (snapshot) => {
            // 处理快照数据逻辑
        });
    } else {
        console.log("用户未登录");
    }
});

方法二：将index.html模块中的变量导出供game.js导入 #

如果你希望在index.html中统一初始化Firebase，可通过模块导出共享变量：

1. 修改index.html中的模块脚本，添加导出声明：

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js";
    import { getDatabase, ref, onValue, update } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js";
    import { getAuth, signInAnonymously, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";

    const firebaseConfig = {
        // 你的配置内容
    };

    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const auth = getAuth(app);
    const database = getDatabase(app);

    // 导出需要共享的变量和函数
    export { auth, database, signInAnonymously, onAuthStateChanged, ref, onValue };
</script>

2. 在game.js中导入这些内容：

// 从index.html的模块导入所需内容
import { auth, database, signInAnonymously, onAuthStateChanged, ref, onValue } from "./index.html";

// 匿名登录
signInAnonymously(auth)
  .catch((error) => {
    console.error("匿名登录失败:", error);
  });

onAuthStateChanged(auth, (user) => {
    if (user) {
        console.log(user.uid);
        onValue(ref(database, 'boards/players'), (snapshot) => {
            // 处理快照数据逻辑
        });
    }
});

注意：方法二需要确保浏览器支持模块导入HTML文件的特性，部分旧浏览器可能存在兼容性问题，推荐优先使用方法一。

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