Flutter Web升级后出现TypeError: Cannot read properties of undefined (reading 'init')

• 项目从Flutter Beta版本升级至Stable 3.3.8，同步更新所有Firebase包
• 升级后Config新增navigatorKey参数，配置代码如下：

class NavKey{
    static final navKey =  GlobalKey<NavigatorState>();
}

static final Config config = Config(
  navigatorKey: NavKey.navKey,          // 新增的navigatorKey参数
  tenant: "xx-3066-xx-xx-xx",
  clientId: "xx-ad66-xx-a6e6-xx",
  scope: "api://xx-xx-422a-a6e6-xx/xx",
  redirectUri:
      "xx://com.example.xx/xx%xx%3D");

• 输入邮箱提交时触发错误：

TypeError: Cannot read properties of undefined (reading 'init')

• main函数中Firebase初始化代码：

Future<void> main() async {
  // await dotenv.load();
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(
      options: const FirebaseOptions(
          apiKey: "xxx-xx",
          authDomain: "xx-xxx.firebaseapp.com",
          databaseURL: "https://xxx-xx-default-xxx.xx.com",
          projectId: "xxx-xxx",
          storageBucket: "xxx-xx.appspot.com",
          messagingSenderId: "xxx",
          appId: "1:xx:web:xxx3d75b63xxxxe9",
          measurementId: "G-xxxx")
          );

  
  runApp(const MyApp()
      /* MaterialApp(//
  home: MyApp())*/
      );
}

• Flutter Web的index.html中引入的Firebase脚本版本为8.6.1：

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-functions.js"></script>

• 错误截图说明：截图显示多处TypeError: Cannot read properties of undefined (reading 'init')错误，均关联Firebase Auth初始化逻辑。

这个错误的核心原因是Flutter Firebase插件版本与Web端引入的Firebase JS SDK版本不兼容。你已升级Flutter侧的Firebase包，但Web端仍在用旧版本JS SDK（8.6.1），新版本FlutterFire插件需要更高版本的JS SDK支持。

解决步骤：

1. 查看pubspec.yaml里的Flutter Firebase插件版本，找到对应的兼容Firebase JS SDK版本（推荐使用9.x及以上版本）。
2. 更新index.html中的Firebase脚本，替换为对应版本的SDK。示例升级到9.23.0（可按需调整版本号）：
   若使用模块化版本：

   <script type="module">
     import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
     import { getAuth } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js";
     import { getFirestore } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js";
     import { getStorage } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-storage.js";
     import { getMessaging } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js";
     import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-analytics.js";
     import { getFunctions } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-functions.js";
   
     const firebaseConfig = {
       apiKey: "xxx-xx",
       authDomain: "xx-xxx.firebaseapp.com",
       databaseURL: "https://xxx-xx-default-xxx.xx.com",
       projectId: "xxx-xxx",
       storageBucket: "xxx-xx.appspot.com",
       messagingSenderId: "xxx",
       appId: "1:xx:web:xxx3d75b63xxxxe9",
       measurementId: "G-xxxx"
     };
   
     const app = initializeApp(firebaseConfig);
     const auth = getAuth(app);
     const db = getFirestore(app);
     const storage = getStorage(app);
     const messaging = getMessaging(app);
     const analytics = getAnalytics(app);
     const functions = getFunctions(app);
   </script>
   

   若想兼容旧的命名空间写法，可使用compat版本：

   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-storage-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-analytics-compat.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-functions-compat.js"></script>
   

3. 清理项目缓存并重新构建：

   flutter clean
   flutter pub get
   flutter build web
   

4. 确认navigatorKey已关联到MaterialApp/CupertinoApp：

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         navigatorKey: NavKey.navKey, // 必须在此处关联
         title: '你的应用',
         home: const HomePage(),
       );
     }
   }
   

内容的提问来源于stack exchange，提问作者ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ