Flutter Web创建默认Firebase应用时提示FirebaseOptions cannot be null如何解决

错误根源 #

• 你使用的firebase_core包版本≥2.0.0，该版本开始不再自动读取index.html中通过JS初始化的Firebase配置，要求在调用Firebase.initializeApp()时显式传入options参数
• 即使兼容旧版逻辑，你当前index.html中Firebase相关JS脚本的放置顺序错误，位于main.dart.js加载逻辑之后，Dart代码执行时JS侧配置还未加载完成

解决方案 #

方案1：使用FlutterFire CLI自动配置（推荐） #

直接运行Flutter官方的配置工具，自动生成对应平台的FirebaseOptions配置，不需要手动修改index.html：

1. 全局激活FlutterFire CLI：dart pub global activate flutterfire_cli
2. 登录你的Firebase账号：flutterfire login
3. 在项目根目录执行配置命令：flutterfire configure，按照提示选择你的Firebase项目和对应平台即可
4. 配置完成后会自动生成firebase_options.dart文件，修改你的main.dart代码：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart'; // 导入自动生成的配置文件

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  // 显式传入options参数
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

5. 直接删除index.html中你手动添加的Firebase JS脚本和初始化代码即可。

方案2：手动兼容旧版逻辑 #

如果你不想用CLI工具，也可以手动修改适配：

1. 调整index.html中脚本的顺序，把Firebase相关JS代码移到main.dart.js加载逻辑的前面，也就是body标签刚开始的位置，保证JS侧Firebase先初始化完成
2. 调用Firebase.initializeApp()时手动传入web端的配置参数：

final Future<FirebaseApp> _initialization = Firebase.initializeApp(
  options: const FirebaseOptions(
    apiKey: "xxxxxxx",
    authDomain: "xxxxxx",
    projectId: "xxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "x"
  ),
);

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