创建默认应用时，FirebaseOptions 不能为 null

Question

我正在尝试在 Flutter 集成电子邮件和基于 google 的登录中尝试一个示例项目，并计划使用 firebase 初始化来完成它，同时我已经按照教程中提到的所有步骤进行操作我得到了这个尝试初始化 firebase 时出错。

"FirebaseOptions cannot be null when creating the default app."
    at Object.throw_ [as throw] (http://localhost:7357/dart_sdk.js:5063:11)
    at Object.assertFailed (http://localhost:7357/dart_sdk.js:4988:15)
at firebase_core_web.FirebaseCoreWeb.new.initializeApp (http://localhost:7357/packages/firebase_core_web/firebase_core_web.dart.lib.js:252:42)
    at initializeApp.next (<anonymous>)
    at http://localhost:7357/dart_sdk.js:40192:33
    at _RootZone.runUnary (http://localhost:7357/dart_sdk.js:40062:59)
    at _FutureListener.thenAwait.handleValue (http://localhost:7357/dart_sdk.js:34983:29)
    at handleValueCallback (http://localhost:7357/dart_sdk.js:35551:49)
    at Function._propagateToListeners (http://localhost:7357/dart_sdk.js:35589:17)
    at _Future.new.[_completeWithValue] (http://localhost:7357/dart_sdk.js:35437:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:7357/dart_sdk.js:35458:35)
    at Object._microtaskLoop (http://localhost:7357/dart_sdk.js:40330:13)
    at _startMicrotaskLoop (http://localhost:7357/dart_sdk.js:40336:13)
    at http://localhost:7357/dart_sdk.js:35811:9

这是我的 index.html

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">
  <meta name="google-signin-client_id" content="619218114547-xxxx.apps.googleusercontent.com">
  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="signin_example">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">
  
  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>signin_example</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  
  
  <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }

    if ('serviceWorker' in navigator) {
      // Service workers are supported. Use them.
      window.addEventListener('load', function () {
        // Wait for registration to finish before dropping the <script> tag.
        // Otherwise, the browser will load the script multiple times,
        // potentially different versions.
        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
        navigator.serviceWorker.register(serviceWorkerUrl)
          .then((reg) => {
            function waitForActivation(serviceWorker) {
              serviceWorker.addEventListener('statechange', () => {
                if (serviceWorker.state == 'activated') {
                  console.log('Installed new service worker.');
                  loadMainDartJs();
                }
              });
            }
            if (!reg.active && (reg.installing || reg.waiting)) {
              // No active web worker and we have installed or are installing
              // one for the first time. Simply wait for it to activate.
              waitForActivation(reg.installing || reg.waiting);
            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
              // When the app updates the serviceWorkerVersion changes, so we
              // need to ask the service worker to update.
              console.log('New service worker available.');
              reg.update();
              waitForActivation(reg.installing);
            } else {
              // Existing service worker is still good.
              console.log('Loading app from service worker.');
              loadMainDartJs();
            }
          });

        // If service worker doesn't succeed in a reasonable amount of time,
        // fallback to plaint <script> tag.
        setTimeout(() => {
          if (!scriptLoaded) {
            console.warn(
              'Failed to load app from service worker. Falling back to plain <script> tag.',
            );
            loadMainDartJs();
          }
        }, 4000);
      });
    } else {
      // Service workers not supported. Just drop the <script> tag.
      loadMainDartJs();
    }
  </script>
  <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.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: "xxx",
      authDomain: "xxx",
      projectId: "xx",
      storageBucket: "exxx",
      messagingSenderId: "xxx",
      appId: "xxx",
      measurementId: "xxx"
    };

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

main.dart 文件中正在进行 firebase 初始化的部分代码

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

Pubsec.yaml项目文件

name: signin_example
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.15.0-268.18.beta <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  firebase_auth: ^3.3.0
  firebase_core: ^1.10.2
  google_sign_in: ^5.2.1
  shared_preferences: ^2.0.9

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

# The following section is specific to Flutter.
flutter:

  assets:
    - assets/images/

  uses-material-design: true

谁能帮我理解这里的问题是什么？

Answer 1

更新：

对于你的 firebase_core 版本似乎足以通过 FirebaseOptions 一旦你在你的 flutter 代码中初始化 firebase（并且你不需要任何脚本标签在你的 index.html):

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    // Replace with actual values
    options: FirebaseOptions(
      apiKey: "XXX",
      appId: "XXX",
      messagingSenderId: "XXX",
      projectId: "XXX",
    ),
  );
  runApp(MyApp());
}

或者，也可以按照更新后的 official documentation 并使用 Firebase CLI 在您的 lib 文件夹中自动创建一个 firebase_options.dart 文件，该文件将定义正确的 FirebaseOptions 为你。步骤是：

安装 Flutterfire CLI：

dart pub global activate flutterfire_cli

配置 Flutterfire（运行在项目的根目录中并通过向导选择正确的 Firebase 项目和目标平台）：

flutterfire configure

将自动生成的firebase_options.dart文件导入到你的main.dart文件中，并初始化Firebase如下：

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

上一个答案：

来自docs：

The only way to currently add the Firebase SDKs to your Flutter web project is by importing the scripts from the Firebase content delivery network (CDN).

因此，请尝试使用脚本标签导入版本为 8.6.1 的相关 firebase 组件，如下所示（更多信息 here）：

  <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-analytics.js"></script>
  <script>
    var firebaseConfig = {
      apiKey: "xxx",
      authDomain: "xxx",
      projectId: "xx",
      storageBucket: "exxx",
      messagingSenderId: "xxx",
      appId: "xxx",
      measurementId: "xxx"
    };

    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

Answer 2

为 Flutter 应用程序添加 Web 功能，我们需要在 Firebase.initializeApp(options:FirebaseOptions...) 的选项参数中提供值。

这些值是我们在 Firebase 控制台中添加 Web 应用程序时得到的。我所做的是在 lib 文件夹中创建 config/config.dart 文件。其中：

 class Configurations {
      static const _apiKey = "Your values";
      static const _authDomain = "Your values";
      static const _projectId = "Your values";
      static const _storageBucket = "Your values"
      static const _messagingSenderId ="Your values"
      static const _appId = "Your values"
    
//Make some getter functions
      String get apiKey => _apiKey;
      String get authDomain => _authDomain;
      String get projectId => _projectId;
      String get storageBucket => _storageBucket;
      String get messagingSenderId => _messagingSenderId;
      String get appId => _appId;
    }

然后将配置文件夹添加到.gitignore。

lib/config

现在将文件导入相关部分，然后

import 'config/config.dart';

final configurations = Configurations();
Future<void> init() async {
        await Firebase.initializeApp(
            options: FirebaseOptions(
                apiKey: configurations.apiKey,
                appId: configurations.appId,
                messagingSenderId: configurations.messagingSenderId,
                projectId: configurations.projectId));

现在应该可以了。

Answer 3

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
// Replace with actual values
options: const FirebaseOptions(
  apiKey: "XXX",
  appId: "XXX",
  messagingSenderId: "XXX",
  projectId: "XXX",
),
);

runApp(MyApp()); }

Answer 4

我也运行关注这个问题。对我有用的修复是：

在我的main()在lib/main.dart我改了

Future<void> main() async {
  await Firebase.initializeApp();
  runApp(const MyApp());
}

到

Future<void> main() async {
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

现在它对我有用！

只需确保激活 flutter cli（参见第 3 段回答）和运行 flutterfire configure。

完成所有操作后，请确保已生成 lib/firebase_options.dart。