Flutter Web接入Firestore报TypeError: Cannot read properties of undefined (reading 'app')如何解决

问题根因 #

你使用的是Firebase JavaScript SDK v9+版本，该版本默认采用模块化API设计，不再支持旧版本的全局window.firebase对象调用方式，同时你当前的初始化代码未正确导入对应初始化方法，因此触发Cannot read properties of undefined (reading 'app')报错。

修复方案（二选一即可，优先选第一种更快生效） #

方案1：使用兼容模式CDN（无需大幅修改现有逻辑）

1. 替换index.html中原有Firebase SDK引入的4个script标签，替换为带-compat后缀的兼容版本：

<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-auth-compat.js"></script>

2. 修改Firebase初始化代码为兼容模式写法：

const firebaseConfig = {
  // 你的原有配置不变
  apiKey: "AIzaSyDmv2oj8958mbUg07FW316IxOAiOdYhPTg",
  authDomain: "jaituncustomaer.firebaseapp.com",
  databaseURL: "https://jaituncustomaer-default-rtdb.firebaseio.com",
  projectId: "jaituncustomaer",
  storageBucket: "jaituncustomaer.appspot.com",
  messagingSenderId: "771594380318",
  appId: "1:771594380318:web:aa0a3b61483d19dc2bfa0f",
  measurementId: "G-B064R6Q9GJ"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const analytics = firebase.analytics();

方案2：保留模块化API写法

如果你不想使用兼容模式，调整初始化脚本的类型和导入逻辑：

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics.js";

  const firebaseConfig = {
    // 原有配置不变
  };
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  // 将实例挂载到window上，供Flutter侧调用
  window.firebaseApp = app;
</script>

额外验证步骤 #

• 确认Flutter侧main.dart中，先执行WidgetsFlutterBinding.ensureInitialized()，再调用Firebase.initializeApp()，执行顺序不能调换。
• 清理项目缓存后重新运行：执行flutter clean，再执行flutter run -d chrome测试效果。

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