Flutter中Firebase初始化在Chrome报错：预期String类型却得到Null

问题描述 #

在Flutter项目中使用以下代码初始化Firebase，Android和iOS端运行正常，但Chrome浏览器中总是抛出Expected a value of type 'String', but got one of type 'Null'错误：

static Future initializeFirebase({required BuildContext context}) async {
    try {
      FirebaseApp firebaseApp = await Firebase.initializeApp(
          options: FirebaseOptions(
              apiKey: "abc",
              authDomain: "def",
              projectId: "ghi",
              storageBucket: "jkl",
              messagingSenderId: "mno",
              appId: "pqr",
              measurementId: "stu"));
      return firebaseApp;
    } catch (err) {
      print("ERRRRR $err");
      throw err.toString();
    }
  }

解决方法 #

1. 补充Web端必填配置参数 #

Web端Firebase SDK对配置项的要求和移动端存在差异，可能是缺少了某个必填字段导致空值错误：

• 若使用实时数据库，需添加databaseURL字段，值为你的数据库地址（格式如https://your-project-id.firebaseio.com）
• 确保所有配置字段均为非空字符串，避免硬编码时出现拼写错误

修改后的初始化代码示例：

import 'package:firebase_core/firebase_core.dart';

static Future initializeFirebase({required BuildContext context}) async {
  try {
    final firebaseApp = await Firebase.initializeApp(
      options: FirebaseOptions(
        apiKey: "abc",
        authDomain: "def",
        projectId: "ghi",
        storageBucket: "jkl",
        messagingSenderId: "mno",
        appId: "pqr",
        measurementId: "stu",
        // 若使用实时数据库则添加该行
        databaseURL: "https://your-project-id.firebaseio.com",
      ),
    );
    return firebaseApp;
  } catch (err) {
    print("ERRRRR $err");
    print(err.stackTrace); // 打印完整栈信息定位具体空值字段
    throw err.toString();
  }
}

2. 使用FlutterFire CLI自动配置（推荐） #

手动硬编码配置易出错，推荐通过Firebase CLI自动生成全平台配置：

• 安装Firebase CLI：npm install -g firebase-tools
• 执行flutterfire configure，按提示选择你的Firebase项目
• CLI会自动生成firebase_options.dart文件，并配置Web端的index.html
• 初始化时直接调用自动生成的配置：

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

static Future initializeFirebase({required BuildContext context}) async {
  try {
    final firebaseApp = await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
    return firebaseApp;
  } catch (err) {
    print("ERRRRR $err");
    print(err.stackTrace);
    throw err.toString();
  }
}

3. 检查Web端依赖与脚本配置 #

确保pubspec.yaml中firebase_core使用适配的稳定版本：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0 # 建议使用最新稳定版

同时确认Web端index.html中已正确引入Firebase SDK脚本（FlutterFire CLI会自动添加）：

<body>
  <!-- 其他页面内容 -->
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
  <script>
    const firebaseConfig = {
      // 自动生成的配置内容
    };
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

4. 定位具体空值字段 #

在catch块中打印完整错误栈err.stackTrace，可以明确看到是哪个配置字段为空值，针对性修复即可。

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