Flutter Web集成Firebase报错：未创建[DEFAULT]应用

你在Flutter Web项目集成Firebase时，遇到了Firebase无法初始化的问题，控制台报错如下：

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app). https://www.gstatic.com/firebasejs/12.9.0/firebase-app.js 2270:29
                 getApp package:firebase_core_web/src/interop/core.dart 60:28
                  app$ package:firebase_core_web/src/firebase_core_web.dart 299:24
            <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 623:19
               <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 648:23
               <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 594:19
               <fn> dart-sdk/lib/async/zone.dart 1849:54
             runUnary dart-sdk/lib/async/future_impl.dart 222:18
                  handleValue dart-sdk/lib/async/future_impl.dart 948:44
                  handleValueCallback dart-sdk/lib/async/future_impl.dart 977:13
                  _propagateToListeners dart-sdk/lib/async/future_impl.dart 720:5
                   [_completeWithValue] dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 504:7
                complete dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 571:12
               _asyncReturn package:firebase_core_web/src/firebase_core_web.dart 225:3
             <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 623:19
               <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 648:23
               <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 594:19
               <fn> dart-sdk/lib/async/zone.dart 1849:54
             runUnary dart-sdk/lib/async/future_impl.dart 222:18
                  handleValue dart-sdk/lib/async/future_impl.dart 948:44
                  handleValueCallback dart-sdk/lib/async/future_impl.dart 977:13
                  _propagateToListeners dart-sdk/lib/async/future_impl.dart 720:5
                   [_completeWithValue] dart-sdk/lib/async/future.dart 533:22
            <fn> dart-sdk/lib/async/zone.dart 1849:54
             runUnary dart-sdk/lib/async/future_impl.dart 222:18
                  handleValue dart-sdk/lib/async/future_impl.dart 948:44
                  handleValueCallback dart-sdk/lib/async/future_impl.dart 977:13
                  _propagateToListeners dart-sdk/lib/async/future_impl.dart 720:5
                   [_completeWithValue] dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 504:7
                complete dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 571:12
               _asyncReturn package:firebase_core_web/src/firebase_core_web.dart 197:3
             <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 623:19
               <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 648:23
               <fn> dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 594:19
               <fn> dart-sdk/lib/async/zone.dart 1849:54
             runUnary dart-sdk/lib/async/future_impl.dart 222:18
                  handleValue dart-sdk/lib/async/future_impl.dart 948:44
                  handleValueCallback dart-sdk/lib/async/future_impl.dart 977:13
                  _propagateToListeners dart-sdk/lib/async/future_impl.dart 720:5
                   [_completeWithValue] dart-sdk/lib/async/future_impl.dart 804:7
                   <fn> dart-sdk/lib/async/schedule_microtask.dart 40:34
            _microtaskLoop dart-sdk/lib/async/schedule_microtask.dart 49:5
             _startMicrotaskLoop dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 118:77  tear dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 188:69
               <fn>

你的main.dart代码：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
    options: const FirebaseOptions(
      apiKey: "xxx",
      authDomain: "xxx",
      projectId: "xxx",
      storageBucket: "xxx",
      messagingSenderId: "xxx",
      appId: "xxx",
      measurementId: "xxx",
    ),
  );

  runApp(const MyApp());
}

你的index.html代码：

<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>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>

  <script>
    var firebaseConfig = {
      apiKey: "xxx",
      authDomain: "xxx",
      projectId: "xxx",
      storageBucket: "xxx",
      messagingSenderId: "xxx",
      appId: "xxx",
      measurementId: "xxx"
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    // const app = initializeApp(firebaseConfig);
    // const analytics = getAnalytics(app);
  </script>

问题原因 #

1. 版本冲突：控制台报错里加载的是firebase-app.js 12.9.0，但你手动引入的是8.10.0版本，新旧版本不兼容导致初始化失败。
2. 重复初始化：你同时在JS（index.html）和Dart（main.dart）代码里调用了initializeApp，双重初始化会导致逻辑混乱。

解决方案 #

方案一：移除JS端初始化（推荐，符合Flutter Web开发规范）

1. 删掉index.html里所有Firebase相关的<script>标签，包括初始化代码。
2. 保留main.dart里的Firebase初始化逻辑。
3. 确保pubspec.yaml里的Firebase依赖版本为最新兼容版，示例：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.24.2
  firebase_auth: ^4.16.0
  cloud_firestore: ^4.14.0
  firebase_storage: ^11.6.0

修改后的index.html示例：

<!DOCTYPE html>
<html>
<head>
  <base href="$FLUTTER_BASE_HREF">
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Your App Name">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">
  <title>Your App Name</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
        navigator.serviceWorker.register(serviceWorkerUrl);
      });
    }
    loadMainDartJs();
  </script>
</body>
</html>

方案二：统一版本并只在JS端初始化

1. 将index.html里的Firebase JS脚本版本全部改为12.9.0，和报错里的版本一致。
2. 删除main.dart里的await Firebase.initializeApp(...)代码，完全依赖JS端的初始化。

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