Flutter Web初始化FlutterFire出现Connection failed错误如何解决

API 探路者

2026-10-6

问题根因

你遇到的报错核心原因是依赖版本不匹配：

你pubspec.yaml中引入的firebase_core: ^1.5.0属于FlutterFire 1.x版本，仅兼容Firebase JavaScript SDK 8.x版本
你index.html中导入的是9.0.0的模块化版本Firebase JS SDK，接口和暴露规则完全不兼容，导致FlutterFire初始化时抛出异常，触发了snapshot.hasError的错误分支
注释错误判断后能正常运行是巧合：初始化错误抛出后，后续Firebase JS SDK刚好加载完成，后续业务逻辑调用时已经完成初始化，但这种状态非常不稳定，随时可能复现报错

修复步骤

替换index.html中的Firebase导入代码，使用匹配的8.x版本：

<!-- 替换原有的type="module"的Firebase相关script代码 -->
<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-analytics.js"></script>
<script>
  const firebaseConfig = {
    // 保留你原有的Firebase配置不变
    apiKey: "********",
    authDomain: "********",
    projectId: "*********",
    storageBucket: "************",
    messagingSenderId: "******",
    appId: "**************",
    measurementId: "******"
  };
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

建议保留错误判断分支，增加错误打印方便后续排查：

if (snapshot.hasError) {
  // 开发环境会在控制台输出具体错误原因
  debugPrint('Firebase初始化错误: ${snapshot.error}');
  return Center(
    child: Text('Connection failed: ${snapshot.error.toString()}'),
  );
}