Sprawdzone metody dotyczące pakietu Firebase JavaScript SDK

Na tej stronie znajdziesz wskazówki i informacje o rozwiązywaniu problemów z JavaScriptem, które mogą wystąpić podczas korzystania z pakietu Firebase JavaScript SDK.

Masz inne problemy lub nie widzisz swojego problemu? Zapoznaj się z głównymi pytaniami i odpowiedziami dotyczącymi Firebase oraz pytaniami i odpowiedziami dotyczącymi konkretnych usług.

Możesz też sprawdzić repozytorium GitHub pakietu Firebase JavaScript SDK, aby uzyskać aktualną listę zgłoszonych problemów i rozwiązań, oraz zgłaszać własne problemy.

Admin SDK dla Node.js nie są zgodne z pakietem Firebase JavaScript SDK

Pakiet Firebase Admin SDK dla Node.js i pakiet Firebase JavaScript SDK to odrębne implementacje, które nie mają wspólnych definicji interfejsów, klas ani funkcji. Instancje obiektów Admin SDK są niezgodne z funkcjami pakietu Firebase JavaScript SDK.

Na przykład przekazanie instancji Admin SDK z pakietu FirebaseApp do funkcji Firebase JavaScript SDK getDatabase powoduje wyświetlenie tego błędu:

TypeError: Cannot read properties of undefined (reading 'getProvider')
 at _getProvider
 at getDatabase

Dotyczy to całego interfejsu API pakietu Firebase JavaScript SDK, a nie tylko Realtime Database. Dotyczy to też użycia w przeciwnym kierunku. Próba użycia typu Timestamp z pakietu Cloud Firestore JS SDK z pakietem Firebase Admin SDK dla Node.js powoduje podobne błędy.

Unikaj używania sprzecznych wersji pakietu Firebase JavaScript SDK

Wiele sprzecznych wersji pakietu Firebase JavaScript SDK skonfigurowanych jako zależności w projekcie spowoduje błędy w czasie działania, gdy instancje pakietu SDK będą przekazywane między pakietami SDK. Na przykład użycie biblioteki SQL Connect z niezgodną wersją FirebaseApp powoduje wyświetlenie tego błędu:

Error: Component data-connect has not been registered yet

Ten problem jest zwykle spowodowany aktualizacją zależności jednego, ale nie wszystkich pakietów Firebase SDK. Taka sytuacja często występuje, gdy automatyczne narzędzie do aktualizacji zależności zmienia podzbiór zależności Firebase SDK w pliku yarn.lock lub package-lock.json projektu. Ponieważ wiele Firebase JavaScript SDK współpracuje ze sobą, używanie różnych wersji pakietów SDK powoduje niezgodności w czasie działania.

Aby rozwiązać ten problem, usuń katalog node_modules/ oraz plik yarn.lock (w przypadku yarn) lub package-lock.json (w przypadku npm) w projekcie i ponownie zainstaluj zależności.

Jeśli błędy nadal występują, rozwiąż problem za pomocą polecenia npm ls command. Spowoduje to zalogowanie zależności projektu, dzięki czemu będzie można zidentyfikować sprzeczne wersje modułu firebase.

Na przykład ten log pokazuje, że package-using-older-firebase importuje sprzeczną wersję pakietu Firebase JavaScript SDK:

$ npm ls firebase --all
your-app@0.0.0
├── firebase@11.2.0
├─┬ @angular/fire@19.0.0
│ ├── firebase@11.2.0 deduped
│ └─┬ rxfire@6.1.0
│   └── firebase@10.14.1 deduped
└─┬ package-using-older-firebase@0.1.0
  └─── firebase@10.14.1

Błędy mogą też występować z powodu mieszania instrukcji require i import w aplikacjach CJS i ESM. Powoduje to utworzenie wielu instancji pakietu Firebase JavaScript SDK, z których każda jest inna, co uniemożliwia współpracę pakietu Firebase JavaScript SDK. Aby rozwiązać ten problem, zwiększ poziom szczegółowości wybranego narzędzia do tworzenia pakietów. Możesz na przykład użyć do tego celu flagi esbuild analyze.

Upewnij się, że procesy robocze usługi są spakowane

Procesy robocze usługi są często tworzone w osobnym potoku niż reszta aplikacji internetowej i nie są uwzględniane w domyślnej konfiguracji narzędzi do tworzenia pakietów, takich jak Webpack.

Jeśli w procesie roboczym usługi używasz modułowej wersji pakietu Firebase JavaScript SDK, skonfiguruj narzędzie do tworzenia pakietów aplikacji tak, aby zawierało plik źródłowy procesu roboczego usługi. Ten przykład używa npx do spakowania skryptu service worker firebase-sw.js w katalogu src projektu:

npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js

Aktywacja skryptu service worker, który nie jest spakowany, nie powiedzie się, jeśli importuje moduły ES, które nie obsługują skryptów service worker, lub pliki, które nie istnieją w zakresie skryptu service worker. Czasami te błędy są ciche i trudne do debugowania.

Więcej informacji o pakowaniu modułowej wersji pakietu Firebase JavaScript SDK w aplikacji znajdziesz w artykule Używanie narzędzi do tworzenia pakietów modułów z Firebase.

Możesz też wyeliminować potrzebę pakowania, importując pakiety compat Firebase JavaScript SDK z CDN:

// Give the service worker access to Firebase Messaging.
// Replace 10.13.2 with the version of the Firebase JS SDK you're using
// in your app.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  ...
});

// Retrieve an instance of Firebase Messaging so that it can handle
// background messages.
const messaging = firebase.messaging();

Podczas pracy z renderowaniem po stronie serwera używaj FirebaseServerApp

Pakiet Firebase JavaScript SDK był pierwotnie przeznaczony do działania w środowiskach przeglądarki. Wprowadzenie platform renderowania po stronie serwera (SSR) powoduje, że pakiet SDK jest używany w nowych środowiskach wykonawczych. Te środowiska wykonawcze udostępniają podzbiór narzędzi i interfejsów API, które są dostępne w przeglądarkach internetowych.

Na przykład niektóre pakiety Firebase SDK wymagają buforowania danych za pomocą IndexedDB, interfejsu API dostępnego tylko w przeglądarce. Usługa Uwierzytelnianie Firebase może wymagać interakcji z użytkownikiem w niektórych procesach logowania, co jest niemożliwe w środowiskach serwera bez interfejsu graficznego. App Check opiera się na heurystyce przeglądarki, aby zweryfikować użytkownika przed utworzeniem tokenów App Check.

Podczas pracy z pakietem SDK w tych nowych środowiskach używaj FirebaseServerApp, nowej odmiany FirebaseApp, która umożliwia wstępne wczytywanie instancji SSR Firebase z danymi zebranymi po stronie klienta.

FirebaseServerApp obsługuje 2 parametry:

  • Token identyfikatora uwierzytelniania: jeśli jest podany, usługa Uwierzytelnianie Firebase automatycznie loguje wcześniej uwierzytelnionego użytkownika, co może obejmować sesję w podziale na CSR / SSR.
  • Token sprawdzania aplikacji: jeśli jest podany, token jest używany przez inne pakiety Firebase SDK bez konieczności inicjowania instancji klienta App Check (która nie jest obsługiwana poza środowiskami przeglądarki). Odblokowuje to obsługę SSR w przypadku usług, w których włączono App Check, takich jak Cloud Functions, SQL Connect, Cloud Firestore, Realtime Database, i Vertex AI.

Przykłady użycia FirebaseServerApp w Next.js znajdziesz w artykule Usprawnianie tworzenia aplikacji SSR za pomocą FirebaseServerApp.