Flutter项目连接Firebase报No Firebase App '[DEFAULT]'错误如何解决

根因说明 #

你遇到的是Flutter Web平台接入Firebase的特有问题，Dart层的初始化逻辑无法独立完成Web端的Firebase SDK初始化，需要额外补充Web端的配置。

修复步骤 #

• 第一步：检查版本匹配
  你报错日志中的Firebase JS SDK版本为8.6.1，需要确认pubspec.yaml中firebase_core依赖版本为1.x系列，版本不匹配会直接导致初始化失败。
• 第二步：补充Web端配置
  打开项目web/index.html文件，在<body>标签的最前端添加如下代码：

  <!-- 引入对应版本的Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
  <!-- 按需引入你用到的其他Firebase服务SDK，示例：
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
  -->
  <script>
    // 替换为你的Firebase项目配置，可从Firebase控制台项目设置页获取
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
  </script>
  

• 第三步：可选适配高版本SDK
  如果你使用firebase_core 2.x及以上版本，可通过FlutterFire CLI自动生成配置，无需手动修改index.html：
  1. 全局安装FlutterFire CLI：dart pub global activate flutterfire_cli
  2. 项目根目录执行配置命令：flutterfire configure
  3. 按提示选择对应Firebase项目和目标平台，自动生成firebase_options.dart文件
  4. 修改main.dart的初始化代码：

  import 'firebase_options.dart';
  
  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
    runApp(const Prolib());
  }
  

• 第四步：清理缓存重启项目
  执行如下命令清理缓存后完全重启debug服务（不要使用热重载）：

  flutter clean
  flutter pub get
  

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