Firebase在Flutter Web端无法运行但安卓模拟器正常求助

问题原因 #

你使用的firebase_core: ^1.6.0、firebase_auth: ^3.1.1版本，仅适配Firebase JS SDK v8版本API，或v9的兼容（compat）版本。你当前采用的v9模块化导入方式未将firebase对象暴露到全局window作用域，Flutter侧的firebase插件无法读取全局变量，因此触发firebase is not defined、无法读取app属性的报错。

解决步骤 #

1. 替换web/index.html中的Firebase配置脚本，删除原有type="module"的脚本块，替换为以下内容：

<!-- Firebase Configuration -->
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "你原有配置的apiKey",
    authDomain: "你原有配置的authDomain",
    projectId: "你原有配置的projectId",
    storageBucket: "你原有配置的storageBucket",
    messagingSenderId: "你原有配置的messagingSenderId",
    appId: "你原有配置的appId"
  };
  firebase.initializeApp(firebaseConfig);
</script>

该写法会将firebase对象挂载到全局window作用域，供Flutter插件读取。

2. 删除web/index.html末尾多余的静态引入main.dart.js的代码行：

<script src="main.dart.js" type="application/javascript"></script>

你已在service worker逻辑中实现了动态加载，重复引入会导致执行顺序异常。

3. 确认Dart入口文件lib/main.dart中，runApp执行前已完成Firebase初始化：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

修改完成后重新运行debug调试或构建release包，Web端Firebase Auth功能即可正常运行。

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