Flutter集成Firebase Auth报错：期望JavaScriptObject却得到FirebaseException

问题说明 #

集成Firebase Authentication后出现类型不匹配报错：期望类型为JavaScriptObject的值，但接收到类型为FirebaseException的值，已尝试多套依赖版本仍未解决。

尝试过的依赖版本 #

第一套 #

• firebase_core_web: 2.10.0
• firebase_auth_web: 5.8.13
• cloud_firestore_web: 3.9.0

第二套 #

• cloud_firestore: 4.10.0
• firebase_auth: 4.11.0
• firebase_core: 2.18.0

项目相关代码 #

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Healthcare App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthenticationScreen(),
    );
  }
}

class AuthenticationScreen extends StatefulWidget {
  @override
  _AuthenticationScreenState createState() => _AuthenticationScreenState();
}

class _AuthenticationScreenState extends State<AuthenticationScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  TextEditingController _emailController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Healthcare App - Sign In'),
      ),
      body: Center(
        child: _isLoading
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextField(
                    controller: _emailController,
                    decoration: InputDecoration(
                      labelText: 'Email',
                    ),
                  ),
                  TextField(
                    controller: _passwordController,
                    decoration: InputDecoration(
                      labelText: 'Password',
                    ),
                    obscureText: true,
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      _signInWithEmailAndPassword();
                    },
                    child: Text('Sign In'),
                  ),
                ],
              ),
      ),
    );
  }

  void _signInWithEmailAndPassword() async {
    setState(() {
      _isLoading = true;
    });

    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
      );
      User? user = userCredential.user;
      if (user != null) {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => PatientHomeScreen(user: user)),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('Sign in failed. Please try again.'),
        ));
      }
    } on FirebaseAuthException catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('${e.message}'),
      ));
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Error: ${e.toString()}'),
      ));
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }
}

class PatientHomeScreen extends StatelessWidget {
  final User user;

  const PatientHomeScreen({Key? key, required this.user}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Patient Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome, ${user.email}!'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SymptomTrackingScreen()),
                );
              },
              child: Text('Track Symptoms'),
            ),
          ],
        ),
      ),
    );
  }
}

class SymptomTrackingScreen extends StatefulWidget {
  @override
  _SymptomTrackingScreenState createState() => _SymptomTrackingScreenState();
}

class _SymptomTrackingScreenState extends State<SymptomTrackingScreen> {
  TextEditingController _symptomController = TextEditingController();
  TextEditingController _noteController = TextEditingController();

  void _saveSymptomData() {
    print('Symptom: ${_symptomController.text}');
    print('Note: ${_noteController.text}');
    _symptomController.clear();
    _noteController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Symptom Tracking'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: _symptomController,
              decoration: InputDecoration(
                labelText: 'Symptom',
              ),
            ),
            SizedBox(height: 20),
            TextField(
              controller: _noteController,
              decoration: InputDecoration(
                labelText: 'Note',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveSymptomData,
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

解决步骤 #

1. 补全Firebase初始化 #

代码里main函数缺少Firebase初始化逻辑，这是Web平台触发该报错的核心原因。修改main函数为异步初始化：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

注意：确保已经通过flutterfire configure命令生成了firebase_options.dart文件，若未生成，先执行该命令完成项目配置。

2. 统一依赖类型 #

不要混合使用单独的Web端依赖（如firebase_core_web）和全平台依赖（如firebase_core），只保留全平台依赖即可。修改pubspec.yaml中的依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.20.0
  firebase_auth: ^4.12.0
  cloud_firestore: ^4.13.0

执行flutter pub get更新依赖。

3. 清理缓存并重建项目 #

• 执行flutter clean清理项目缓存
• 删除项目根目录下的pubspec.lock文件
• 重新执行flutter pub get拉取依赖
• 若项目未启用空安全，运行Web项目时添加参数：flutter run -d chrome --no-sound-null-safety

4. 检查Web端配置 #

确认web/index.html中的Firebase配置脚本是由flutterfire configure自动生成的，不要手动修改，避免配置错误导致的类型异常。

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