Flutter Web集成Firebase报错TypeError: Cannot read 'app' of undefined

错误原因 #

• 你使用的Flutter Firebase依赖包（firebase_core: ^1.6.0等）仅兼容8.x版本的Firebase JS SDK，当前配置用的9.x版本是模块化设计，不会暴露全局firebase对象，导致底层查找firebase.app时报错
• index.html内的初始化代码存在语法错误，未定义app变量就传入getAnalytics方法，且模块化写法无法和老版本Flutter Firebase包适配
• main.dart中的Firebase.initializeApp()未添加await关键字，会导致应用启动时Firebase还未完成初始化就加载后续逻辑

修复步骤 #

步骤1：替换index.html中的Firebase JS SDK版本

将原有9.0.1版本的SDK引用替换为8.10.0版本：

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>

步骤2：修正index.html中的初始化代码

删除原有type="module"的script块，替换为普通非模块化初始化代码：

<script>
  const firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    measurementId: "XXXXXXXX"
  };
  firebase.initializeApp(firebaseConfig);
</script>

如果不需要使用Analytics，可以直接删除相关代码避免额外报错。

步骤3：修正main.dart中的初始化逻辑

给Firebase.initializeApp()添加await关键字，确保初始化完成后再启动应用：

main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

步骤4：清理缓存重新运行

执行以下命令清理旧构建缓存后重新启动项目：

flutter clean
flutter pub get
flutter run -d chrome

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