接入Flutter Web：如何解决No Firebase App '[DEFAULT]' has been created报错

你遇到的报错是FlutterFire插件版本与手动引入的Firebase JS SDK版本不兼容、加上初始化执行顺序、Web端不支持部分移动端API共同导致的，按以下步骤修复即可：

步骤1：删除index.html中手动添加的Firebase相关代码 #

把你在index.html里添加的以下内容全部删除：

• 所有https://www.gstatic.com/firebasejs/8.6.1/开头的script引入标签
• 包含firebaseConfig变量和firebase.initializeApp(firebaseConfig)的整段script代码

新版FlutterFire已经完全支持Web端自动初始化，不需要手动添加旧版JS SDK引入和配置，手动添加反而会和插件内部的初始化逻辑冲突。你之前给初始化语句加await不生效，是因为外层script没有标记为async函数，本身语法就不合法，等于初始化逻辑根本没有正确执行。

步骤2：适配main.dart的初始化逻辑 #

移动端运行正常是因为原生端配置文件会被自动识别，Web端需要显式传入配置，同时要规避Web端不支持的API调用，修改后的代码如下：

// 顶部新增导入，用于判断运行平台
import 'package:flutter/foundation.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 区分平台做初始化
  if (kIsWeb) {
    await Firebase.initializeApp(
      options: const FirebaseOptions(
        apiKey: "xxx", // 替换为你自己的Firebase配置值
        authDomain: "xxx",
        databaseURL: "xxx",
        projectId: "xxx",
        storageBucket: "xxx",
        messagingSenderId: "xxx",
        appId: "xxx",
        measurementId: "xxx",
      ),
    );
  } else {
    // 移动端走原有自动初始化逻辑
    await Firebase.initializeApp();
  }
  final prefs = PreferenciasUsuario();
  await prefs.initPrefs();
  await PushNotificationsProvider.initializeApp();
  FirebaseDatabase database = FirebaseDatabase.instance;
  // 持久化缓存仅支持移动端，Web端不调用该方法
  if (!kIsWeb) {
    database.setPersistenceEnabled(true);
    database.setPersistenceCacheSizeBytes(10000000); 
  }
  runApp(MyApp());
}

你最早遇到的Oh No! Error 5就是因为Web端执行了不支持的setPersistenceEnabled方法导致的，加平台判断后该错误会同步解决。

步骤3：清理缓存重新运行 #

执行以下命令清理旧构建缓存：

flutter clean
flutter pub get

清理完成后重新启动Chrome设备运行即可。

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