Flutter Web初始化Firebase时报Cannot read properties of undefined (reading 'app')错误

这个TypeError: Cannot read properties of undefined (reading 'app')报错的核心是Flutter Web运行时，底层JS环境中的firebase全局对象未被正确初始化，导致Dart侧调用Firebase SDK时找不到对应的app属性。常见触发场景如下：

• 未在项目web/index.html中引入Firebase官方JS SDK，或者脚本引入顺序错误
• 引入的Firebase JS SDK版本和项目pubspec.yaml中依赖的Flutter Firebase包版本不匹配
• Firebase.initializeApp()调用时机过早，Firebase JS脚本还未完成加载就执行了初始化逻辑
• 项目仍在使用老旧的手动集成方式，未适配新版Flutter Firebase的Web端集成规范

• 修正web/index.html脚本引入逻辑
  在<body>标签末尾、main.dart.js引入之前添加Firebase JS SDK脚本，确保所有用到的Firebase服务都对应引入，示例如下：

<!-- 替换为和你的Flutter Firebase版本匹配的JS SDK版本 -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<!-- 按需引入其他用到的服务，例如认证、云 Firestore 等 -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js"></script>
<script src="main.dart.js"></script>

• 调整初始化调用顺序
  在main函数中先确保Flutter引擎初始化完成，再执行Firebase初始化：

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

• 用FlutterFire CLI自动配置（推荐）
  使用官方FlutterFire CLI执行flutterfire configure命令，工具会自动生成多平台的Firebase配置，Web端不需要手动修改index.html引入JS脚本，适配最新版集成规范。
• 清除缓存重新构建
  执行flutter clean清理旧构建缓存，再重新运行flutter run -d chrome，排除缓存文件导致的加载异常。
• 校验依赖版本兼容性
  确认pubspec.yaml中所有firebase相关依赖都为兼容的稳定版，不要混用不同大版本的Firebase套件包。

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