Dart/Flutter升级迁移至package:web后Google登录类型不匹配错误求助

问题原因 #

从dart:html迁移到package:web后，旧版本的Firebase相关依赖（如firebase_auth_web、google_sign_in_web）仍依赖dart:html的JS类型体系，与package:web的JSObject类型不兼容，导致回调函数类型匹配失败，触发'(JSObject) => void' is not a subtype of type 'JavaScriptFunction?'错误。

解决方案 #

1. 升级兼容package:web的依赖版本 #

将依赖更新为适配package:web的稳定版本：

firebase_core_web: ^2.22.0
firebase_auth: ^5.6.0
firebase_auth_web: ^5.15.0
google_identity_services_web: ^0.4.0
google_sign_in: ^6.2.3
google_sign_in_web: ^0.12.5

执行命令更新依赖：

flutter pub upgrade

2. 替换FirebaseAuthWeb的直接调用 #

避免使用平台专属的FirebaseAuthWeb.instance，改用跨平台的FirebaseAuth.instance：

Widget checkAuth(Widget content) {
  return LayoutBuilder(
    builder: (context, constraints) {
      return StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(), // 替换此处
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final userEmail = snapshot.data?.email;
            if (userEmail != null && habilitationList.contains(userEmail)) {
              return content;
            } else {
              _signOut(context);
              return const Scaffold(
                body: Center(child: SelectableText("User not allowed to use the CRM")),
              );
            }
          }
          return const AuthGate();
        },
      );
    },
  );
}

3. 调整Google登录的JS回调处理 #

如果你的登录逻辑涉及自定义JS回调，确保用package:web的类型体系处理。例如使用google_identity_services_web时：

import 'package:google_identity_services_web/google_identity_services_web.dart';

void initGoogleSignIn() {
  googleIdentityServices.initialize(InitConfig(
    client_id: '你的客户端ID',
    callback: (credential) {
      // 凭证处理逻辑
    },
  ));
}

4. 清理缓存并重新构建 #

执行以下命令确保依赖完全生效：

flutter clean
flutter pub get
flutter build web

验证 #

完成上述步骤后，重新运行Web项目，测试Google登录流程，确认错误是否消除。

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