如何将Flutter项目迁移至Firebase v9现代Web模块化风格并解决初始化报错

1. 修正main.dart初始化逻辑 #

Firebase.initializeApp()为异步方法，未等待初始化完成就启动应用，会直接导致后续读取Firebase实例时返回undefined。修改main函数代码如下：

import 'package:flutter/material.dart';
import 'package:devcom/auth.dart';
import 'package:devcom/auth_provider.dart';
import 'package:devcom/root_page.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 新增await等待Firebase初始化完成
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AuthProvider(
      auth: Auth(),
      child: MaterialApp(
        title: 'Flutter login demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: RootPage(),
      ),
    );
  }
}

2. 修正index.html的Firebase SDK引入逻辑 #

当前Flutter官方Firebase Web插件还未适配Firebase JS SDK v9的纯模块化导入写法，纯模块化导入的Firebase实例为局部变量，Flutter插件无法读取，会直接报reading 'app'相关错误。需要将SDK替换为v9兼容版本，将Firebase实例挂载到全局作用域供插件读取：

1. 删除你原有写的<script type="module">模块化导入代码段
2. 在<body>标签最开头、serviceWorker相关脚本之前添加如下代码：

<!-- Firebase v9 兼容模式SDK -->
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics-compat.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "...",
    authDomain: "......",
    databaseURL: ".....",
    projectId: "...",
    storageBucket: "",
    messagingSenderId: "",
    measurementId: "",
    appId: "1:.........:web:...........",
  };
  // 全局初始化Firebase，供Flutter插件读取
  firebase.initializeApp(firebaseConfig);
</script>

3. 验证依赖版本 #

检查pubspec.yaml中Firebase相关依赖是否为匹配的稳定版本，建议升级到以下版本及以上：

• firebase_core: ^1.10.0
• firebase_auth: ^3.3.0

修改完成后执行flutter clean清除项目缓存，重新运行即可解决报错。

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