Trang này cung cấp các mẹo và cách khắc phục sự cố JavaScript mà bạn có thể gặp phải khi sử dụng SDK Firebase JavaScript.
Bạn gặp vấn đề khác hoặc không thấy vấn đề của mình? Hãy nhớ xem các câu hỏi thường gặp chính về Firebase để biết thêm câu hỏi thường gặp về Firebase nói chung hoặc về từng sản phẩm.
Bạn cũng có thể kiểm tra kho lưu trữ GitHub của SDK Firebase JavaScript để xem danh sách mới nhất về các vấn đề đã báo cáo và cách khắc phục sự cố, đồng thời gửi vấn đề của riêng bạn tại đó.
Admin SDK cho các cấu trúc Node.js không tương thích với SDK Firebase JavaScript
Firebase Admin SDK cho Node.js và SDK Firebase JavaScript là các phương thức triển khai khác nhau không chia sẻ định nghĩa giao diện, lớp hoặc hàm. Các thực thể của đối tượng Admin SDK không tương thích với các hàm SDK Firebase JavaScript.
Ví dụ: một thực thể của FirebaseApp của Admin SDK được truyền đến hàm getDatabase SDK Firebase JavaScript sẽ tạo ra lỗi sau:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
Điều này đúng với toàn bộ giao diện API SDK Firebase JavaScript, chứ không chỉ Realtime Database.
Điều này cũng đúng khi sử dụng theo hướng ngược lại. Việc cố gắng sử dụng loại Timestamp của SDK JS Cloud Firestore với Firebase Admin SDK cho Node.js sẽ gây ra các lỗi tương tự.
Tránh sử dụng các phiên bản xung đột của SDK Firebase JavaScript
Nhiều phiên bản xung đột của SDK Firebase JavaScript được định cấu hình làm phần phụ thuộc trong một dự án sẽ gây ra lỗi thời gian chạy khi các thực thể SDK được truyền giữa các gói SDK. Ví dụ: việc sử dụng thư viện Data Connect với phiên bản FirebaseApp không khớp sẽ gây ra lỗi sau:
Error: Component data-connect has not been registered yet
Vấn đề này thường xảy ra do quá trình cập nhật phần phụ thuộc của một gói SDK Firebase nhưng không phải tất cả các gói. Tình huống này thường xảy ra khi một công cụ cập nhật phần phụ thuộc tự động thay đổi một tập hợp con của các phần phụ thuộc SDK Firebase trong tệp yarn.lock hoặc package-lock.json của dự án. Vì nhiều SDK Firebase JavaScript tương tác với nhau, nên việc sử dụng nhiều phiên bản SDK sẽ gây ra sự không tương thích trong thời gian chạy,
Để khắc phục vấn đề này, hãy xoá thư mục node_modules/ và yarn.lock (đối với yarn) hoặc package-lock.json (đối với npm) trong dự án và cài đặt lại các phần phụ thuộc.
Nếu vẫn còn lỗi, hãy gỡ lỗi thêm bằng lệnh npm ls. Thao tác này sẽ ghi lại các phần phụ thuộc của dự án để bạn có thể xác định các phiên bản xung đột của mô-đun firebase.
Ví dụ: nhật ký sau đây cho thấy package-using-older-firebase đang nhập một phiên bản xung đột của SDK Firebase JavaScript:
$ 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
Lỗi cũng có thể xảy ra do kết hợp các câu lệnh require và import của CJS và ESM trong ứng dụng. Điều này tạo ra nhiều thực thể của SDK Firebase JavaScript, mỗi thực thể khác với thực thể khác, làm hỏng khả năng tương tác của SDK Firebase JavaScript.
Tăng mức độ chi tiết của trình tạo gói mà bạn chọn để gỡ lỗi trường hợp này. Ví dụ: bạn có thể sử dụng cờ phân tích esbuild cho mục đích này.
Đảm bảo rằng các worker dịch vụ được đóng gói
Trình chạy dịch vụ thường được tạo từ một quy trình riêng biệt với phần còn lại của ứng dụng web và không có trong cấu hình mặc định của trình đóng gói như Webpack.
Nếu bạn sử dụng phiên bản mô-đun của SDK Firebase JavaScript trong worker dịch vụ, hãy đảm bảo bạn định cấu hình trình gói ứng dụng để đưa tệp nguồn worker dịch vụ vào. Ví dụ sau đây sử dụng npx để gói worker dịch vụ firebase-sw.js trong thư mục src của dự án:
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
Việc kích hoạt trình chạy dịch vụ không được đóng gói sẽ không thành công nếu trình chạy dịch vụ đó nhập các mô-đun ES không hỗ trợ trình chạy dịch vụ hoặc các tệp không tồn tại trong phạm vi của trình chạy dịch vụ. Đôi khi, các lỗi này không có thông báo và khó gỡ lỗi.
Hãy xem phần Sử dụng trình đóng gói mô-đun với Firebase để biết thêm thông tin về cách đóng gói phiên bản mô-đun của SDK Firebase JavaScript vào ứng dụng.
Ngoài ra, bạn có thể không cần phải gói bằng cách nhập các gói SDK compat
Firebase JavaScript từ 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();
Sử dụng FirebaseServerApp khi làm việc với tính năng Hiển thị phía máy chủ
SDK Firebase JavaScript ban đầu được thiết kế để chạy trong môi trường trình duyệt. Việc giới thiệu các khung Hiển thị phía máy chủ (SSR) sẽ thúc đẩy việc sử dụng SDK vào các môi trường thời gian chạy mới. Các môi trường thời gian chạy này cung cấp một tập hợp con các công cụ và API mà trình duyệt web cung cấp.
Ví dụ: một số SDK Firebase yêu cầu lưu dữ liệu vào bộ nhớ đệm bằng IndexedDB, một API chỉ dành cho trình duyệt. Firebase Auth có thể yêu cầu người dùng tương tác trong một số quy trình đăng nhập nhất định mà không thể thực hiện được trong môi trường máy chủ không có giao diện người dùng. App Check dựa vào phương pháp phỏng đoán của trình duyệt để xác thực người dùng trước khi tạo mã thông báo App Check.
Khi làm việc với SDK trong các môi trường mới này, hãy sử dụng FirebaseServerApp, một biến thể mới của FirebaseApp cung cấp phương tiện để tải trước thực thể Firebase SSR bằng dữ liệu được thu thập từ phía máy khách.
FirebaseServerApp hỗ trợ hai tham số:
- Mã thông báo nhận dạng xác thực: nếu được cung cấp, Firebase Auth sẽ tự động đăng nhập một người dùng đã được xác thực trước đó, có thể trải dài một phiên trên ranh giới CSR/SSR.
- Mã thông báo kiểm tra ứng dụng: Nếu được cung cấp, mã thông báo này sẽ được các SDK Firebase khác sử dụng mà không cần khởi chạy một thực thể của ứng dụng App Check (không được hỗ trợ bên ngoài môi trường trình duyệt). Thao tác này sẽ bỏ chặn tính năng hỗ trợ SSR cho các sản phẩm đã bật App Check, chẳng hạn như Cloud Functions, Data Connect, Cloud Firestore, Realtime Database và Vertex AI.
Hãy xem bài viết Làm đơn giản quy trình phát triển ứng dụng SSR bằng FirebaseServerApp để biết ví dụ về cách sử dụng FirebaseServerApp trong Next.js.