部署后Flutter Web应用显示空白白屏，Firebase Auth异常

我通过flutter build web和firebase deploy命令部署了集成Firebase Auth与Firebase Firestore的Flutter Web应用。部署完成后，应用页面仅显示空白白屏，该应用托管在Firebase平台上。请问有开发者遇到过此类问题吗？

pubspec.yaml 部分依赖内容 #

dependencies:
  blur: ^3.1.0
  cloud_firestore: ^4.4.5
  cupertino_icons: ^1.0.2
  email_validator: ^2.1.17
  firebase_auth: ^4.4.0
  firebase_auth_web: ^5.3.0
  firebase_core: ^2.9.0
  fl_chart: ^0.61.0
  fl_heatmap: ^0.2.0
  flutter:
    sdk: flutter
  flutter_heatmap_calendar: ^1.0.5
  flutter_styled_toast: ^2.1.3
  fluttertoast: ^8.2.1
  google_fonts: ^4.0.3
  google_maps_flutter: ^2.2.5
  google_maps_flutter_web: ^0.4.0+7
  intl: 0.17.0
  pie_chart: ^5.3.2
  pointer_interceptor: ^0.9.3+4
  provider: ^6.0.5
  url_launcher: ^6.1.10

dev_dependencies:
  flutter_lints: ^2.0.0
  flutter_test:
    sdk: flutter

main函数代码 #

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const FirebaseOptions firebaseOptions = FirebaseOptions(
    apiKey: "apiKey",
    projectId: "projectId",
    messagingSenderId: "messagingSenderId",
    appId: "appId",
  );
  await Firebase.initializeApp(name: "name", options: firebaseOptions);

  runApp(const MyApp());
}

MyApp组件代码 #

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => TimeProvider(),
        ),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: true,
        key: _key,
        scaffoldMessengerKey: Utils.messengerKey,
        home: StreamBuilder<User?>(
          stream: FirebaseAuth.instance.authStateChanges(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return const LoadingAuthScreen();
            } else {
              return const AuthPage();
            }
          },
        ), //const DrawerHome(),
      ),
    );
  }
}

index.html中的Script标签代码 #

<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-app.js";
    import { getAuth } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-analytics.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "apiKey",
      authDomain: "authDomain",
      databaseURL: "databaseURL",
      projectId: "projectId",
      storageBucket: "storageBucket",
      messagingSenderId: "messagingSenderId",
      appId: "appId",
      measurementId: "measurementId"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
  </script>

常见排查与解决方法 #

• 移除重复的Firebase初始化：Dart代码里已经完成Firebase初始化，index.html中的JS初始化属于重复操作，会导致冲突，直接删除这段script代码即可。
• 补全FirebaseOptions配置：对比JS侧的完整配置，Dart的FirebaseOptions缺少authDomain、storageBucket等关键字段，需从Firebase控制台复制Web应用的完整配置信息填入。
• 查看浏览器控制台错误：按F12打开开发者工具，检查Console标签页的报错信息——这是定位白屏问题最直接的方式，依赖加载失败、初始化异常、权限错误等都会在这里显示。
• 验证Firebase权限规则：确认Firestore和Auth的规则允许部署后的应用访问，开发阶段可临时设置宽松规则测试（比如Firestore规则设为allow read, write: if true;），上线前必须改回安全规则。
• 使用正式构建命令：执行flutter build web --release重新构建后再部署，debug构建可能存在兼容性问题。
• 排查Provider异常：检查TimeProvider的初始化逻辑，比如构造函数中是否有未处理的异步操作或抛出异常，这会导致整个Widget树无法渲染。

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