使用Firestore时app.js调用db报Uncaught ReferenceError错误如何解决

• 作用域隔离：带type="module"属性的script标签内部的变量属于模块私有作用域，不会暴露到全局window，你在外部普通script标签引入的app.js运行在全局作用域，自然无法访问到模块内定义的db变量。
• API语法不匹配：你使用的是Firebase 9+模块化版本SDK，原生不支持db.collection()这类旧版本的命名空间式调用写法，即便解决了作用域问题后续也会报错。

方案1：统一使用ES模块规范（推荐） #

1. 修改HTML中引入app.js的script标签，添加type="module"属性，和Firebase初始化脚本保持规范一致：

<script type="module" src="app.js"></script>

2. 直接把Firebase初始化逻辑和相关导入都挪到app.js中，同时调整Firestore调用写法适配模块化API，修改后的app.js代码如下：

// 导入所需依赖
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js";

// Firebase配置
const firebaseConfig = {
  apiKey: "AIzaSyA_iQKn0dazcTipquleNaF0df32KdWKia4",
  authDomain: "ninja-flutter-tut.firebaseapp.com",
  projectId: "ninja-flutter-tut",
  storageBucket: "ninja-flutter-tut.appspot.com",
  messagingSenderId: "876805702468",
  appId: "1:876805702468:web:cd2cc55cc394f94726cd11",
  measurementId: "G-9HDMHXT2PY"
};

// 初始化实例
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// 获取数据的模块化写法
getDocs(collection(db, 'cafes')).then(snapshot => {
    console.log("test", snapshot.docs);
});

3. 删除HTML中原先写在script标签里的Firebase初始化和导入代码，避免重复初始化。

方案2：快速适配（仅适合本地测试） #

如果你暂时不想调整API写法，可以将db暴露到全局，同时替换为兼容版SDK：

1. 修改HTML中Firebase初始化的script标签，将db挂载到window对象，同时替换为compat兼容版SDK导入：

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app-compat.js";
  import { getFirestore} from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore-compat.js";
  
  const firebaseConfig = {
    apiKey: "AIzaSyA_iQKn0dazcTipquleNaF0df32KdWKia4",
    authDomain: "ninja-flutter-tut.firebaseapp.com",
    projectId: "ninja-flutter-tut",
    storageBucket: "ninja-flutter-tut.appspot.com",
    messagingSenderId: "876805702468",
    appId: "1:876805702468:web:cd2cc55cc394f94726cd11",
    measurementId: "G-9HDMHXT2PY"
  };

  const app = initializeApp(firebaseConfig);
  // 将db挂载到全局window，供外部script访问
  window.db = getFirestore(app);
</script>

2. 无需修改app.js的原有代码，直接运行即可正常使用旧版API语法。

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