Flutter初始化Firebase时Web端报错但Android端运行正常如何解决

Flutter Web端无法直接使用无参Firebase.initializeApp()完成初始化，必须传入Web平台对应的Firebase项目配置参数。Android/iOS端的配置可通过google-services.json/GoogleService-Info.plist自动读取，Web端没有对应的自动读取逻辑，所以会出现Android运行正常、Web报错的情况。

方法1：在初始化时传入FirebaseOptions参数 #

先在Firebase控制台的项目设置里，找到Web应用的配置参数，再在Firebase.initializeApp的时候传入对应配置即可：

import 'package:flutter/foundation.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (kIsWeb) {
    await Firebase.initializeApp(
      options: const FirebaseOptions(
        apiKey: "你的Web端apiKey",
        authDomain: "你的项目.firebaseapp.com",
        projectId: "你的项目id",
        storageBucket: "你的项目.appspot.com",
        messagingSenderId: "你的发件人id",
        appId: "你的Web应用appId",
      ),
    );
  } else {
    await Firebase.initializeApp();
  }
  runApp(MyApp());
}

注：必须导入package:flutter/foundation.dart才能使用kIsWeb常量判断当前平台

方法2：在web/index.html中引入Firebase SDK并完成初始化 #

1. 打开项目下的web/index.html文件，在<body>标签结束前加入Firebase的CDN脚本和初始化代码：

<!-- Firebase核心SDK -->
<script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-app.js"></script>
<!-- 若使用其他Firebase服务需额外引入对应SDK，示例如下 -->
<script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-firestore.js"></script>

<script>
  // 替换为Firebase控制台中你自己的Web项目配置
  const firebaseConfig = {
    apiKey: "你的Web端apiKey",
    authDomain: "你的项目.firebaseapp.com",
    projectId: "你的项目id",
    storageBucket: "你的项目.appspot.com",
    messagingSenderId: "你的发件人id",
    appId: "你的Web应用appId"
  };
  firebase.initializeApp(firebaseConfig);
</script>

2. 完成上述配置后，main.dart中的Firebase.initializeApp()无需修改，直接调用无参方法即可在Web端正常运行。

如果配置后仍然报错，可以检查以下内容：

• Firebase控制台中是否已正确添加Web应用
• 填写的配置参数是否和Firebase控制台给出的完全一致
• 引入的Firebase Web SDK版本和pubspec.yaml中firebase_core的版本是否兼容

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