หน้านี้มีเคล็ดลับและการแก้ปัญหาเกี่ยวกับ JavaScript ที่คุณอาจพบเมื่อใช้ Firebase JavaScript SDK
หากพบปัญหาอื่นๆ หรือไม่พบปัญหาที่ต้องการ อย่าลืมอ่านคําถามที่พบบ่อยหลักของ Firebase เพื่อดูคําถามที่พบบ่อยเกี่ยวกับ Firebase ทั้งหมดหรือเฉพาะผลิตภัณฑ์
นอกจากนี้ คุณยังตรวจสอบรายการปัญหาที่รายงานและการแก้ปัญหาล่าสุดใน Firebase JavaScript SDK GitHub Repo ได้ด้วย และสามารถรายงานปัญหาของคุณเองในนั้น
Admin SDK สำหรับคอนสตรัคต์ Node.js ใช้ร่วมกับ Firebase JavaScript SDK ไม่ได้
Firebase Admin SDK สำหรับ Node.js และ Firebase JavaScript SDK เป็นการนำไปใช้งานที่แตกต่างกันซึ่งไม่ได้ใช้อินเทอร์เฟซ คลาส หรือคำจำกัดความของฟังก์ชันร่วมกัน อินสแตนซ์ของออบเจ็กต์ Admin SDK ใช้ร่วมกับฟังก์ชัน Firebase JavaScript SDK ไม่ได้
เช่น อินสแตนซ์ของ FirebaseApp ของ Admin SDK ที่ส่งไปยังฟังก์ชัน getDatabase ของ JavaScript SDK Firebase จะทำให้เกิดข้อผิดพลาดต่อไปนี้
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
ซึ่งรวมถึงแพลตฟอร์ม API ทั้งหมดของ Firebase JavaScript SDK ไม่ใช่แค่ Realtime Database
และในทางกลับกัน การพยายามใช้Timestampประเภท Cloud Firestore JS SDK กับ Firebase Admin SDK สำหรับ Node.js จะทำให้เกิดข้อผิดพลาดที่คล้ายกัน
หลีกเลี่ยงการใช้ SDK Firebase JavaScript เวอร์ชันที่ขัดแย้งกัน
SDK Firebase JavaScript หลายเวอร์ชันที่ขัดแย้งกันซึ่งกําหนดค่าเป็น Dependency ในโปรเจ็กต์จะทําให้มีข้อผิดพลาดรันไทม์เมื่อมีการนําอินสแตนซ์ SDK ไปไว้ระหว่างแพ็กเกจ SDK ตัวอย่างเช่น การใช้ไลบรารี Data Connect กับ FirebaseApp เวอร์ชันที่ไม่ตรงกันจะทำให้เกิดข้อผิดพลาดต่อไปนี้
Error: Component data-connect has not been registered yet
ปัญหานี้มักเกิดจากการอัปเดตทรัพยากร 1 รายการของแพ็กเกจ Firebase SDK แต่ไม่ใช่ทั้งหมด สถานการณ์นี้มักเกิดขึ้นเมื่อเครื่องมืออัปเดตทรัพยากรแบบอัตโนมัติเปลี่ยนแปลงชุดย่อยของทรัพยากร Firebase SDK ภายในไฟล์ yarn.lock หรือ package-lock.json ของโปรเจ็กต์ เนื่องจาก SDK ของ Firebase JavaScript หลายรายการทำงานร่วมกันได้ การใช้ SDK หลายเวอร์ชันจึงทําให้เกิดความเข้ากันไม่ได้ของรันไทม์
วิธีแก้ไขปัญหานี้คือ ให้ลบไดเรกทอรี node_modules/ และ yarn.lock (สําหรับ yarn) หรือ package-lock.json (สําหรับ npm) ในโปรเจ็กต์ แล้วติดตั้งข้อกําหนดอีกครั้ง
หากยังพบข้อผิดพลาดอยู่ ให้แก้ไขข้อผิดพลาดเพิ่มเติมด้วยคําสั่ง npm ls ซึ่งจะบันทึกข้อมูลการพึ่งพาของโปรเจ็กต์เพื่อให้คุณระบุเวอร์ชันของโมดูล firebase ที่ขัดแย้งกันได้
ตัวอย่างเช่น บันทึกต่อไปนี้แสดงpackage-using-older-firebaseการนําเข้า 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
ข้อผิดพลาดอาจเกิดขึ้นจากการผสมคำสั่ง require และ import ของ CJS และ ESM ในแอปด้วย ซึ่งจะสร้างอินสแตนซ์ Firebase JavaScript SDK หลายรายการที่แยกจากกัน ซึ่งทำให้ Firebase JavaScript SDK ใช้งานร่วมกันไม่ได้
เพิ่มรายละเอียดของเครื่องมือรวมที่คุณเลือกเพื่อแก้ไขข้อบกพร่องในสถานการณ์นี้ ตัวอย่างเช่น คุณสามารถใช้flag analyze ของ esbuild เพื่อวัตถุประสงค์นี้ได้
ตรวจสอบว่ามีการรวม Service Worker ไว้แล้ว
Service Worker มักจะสร้างขึ้นจากไปป์ไลน์แยกต่างหากจากส่วนที่เหลือของเว็บแอป และไม่ได้รวมอยู่ในการกำหนดค่าเริ่มต้นของเครื่องมือรวมไฟล์ เช่น Webpack
หากคุณใช้ Firebase JavaScript SDK เวอร์ชันโมดูลภายใน Service Worker โปรดตรวจสอบว่าคุณได้กําหนดค่า App Bundler ให้รวมไฟล์ต้นฉบับของ Service Worker แล้ว ตัวอย่างต่อไปนี้ใช้ npx เพื่อรวมไฟล์ firebase-sw.jsService Worker ไว้ในไดเรกทอรี src ของโปรเจ็กต์
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
การเปิดใช้งาน Service Worker ที่ไม่ได้รวมกลุ่มจะดำเนินการไม่สำเร็จหากมีการนําเข้าโมดูล ES ที่ไม่รองรับ Service Worker หรือไฟล์ที่ไม่มีอยู่ในขอบเขตของ Service Worker บางครั้งการไม่ผ่านการตรวจสอบเหล่านี้อาจไม่แสดงอาการใดๆ และแก้ไขได้ยาก
ดูข้อมูลเพิ่มเติมเกี่ยวกับการรวม SDK Firebase JavaScript เวอร์ชันแยกส่วนไว้ในแอปได้ที่การใช้เครื่องมือรวมโมดูลกับ Firebase
หรือคุณจะไม่ต้องใช้การรวมกลุ่มโดยนําเข้ากลุ่ม compat
Firebase JavaScript SDK จาก 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();
ใช้ FirebaseServerApp เมื่อทํางานกับการแสดงผลฝั่งเซิร์ฟเวอร์
เดิมที SDK ของ Firebase JavaScript มีไว้เพื่อใช้งานในสภาพแวดล้อมเบราว์เซอร์ การเปิดตัวเฟรมเวิร์กการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) ผลักดันให้การใช้ SDK เข้าสู่สภาพแวดล้อมรันไทม์แบบใหม่ รันไทม์เหล่านี้มีชุดเครื่องมือและ API ย่อยที่เว็บเบราว์เซอร์มีให้
ตัวอย่างเช่น Firebase SDK บางรายการกำหนดให้ต้องแคชข้อมูลด้วย IndexedDB ซึ่งเป็น API สําหรับเบราว์เซอร์เท่านั้น Firebase Auth อาจกำหนดให้ผู้ใช้โต้ตอบในขั้นตอนการลงชื่อเข้าใช้บางอย่างที่ดำเนินการไม่ได้ในสภาพแวดล้อมเซิร์ฟเวอร์แบบ Headless App Check อาศัยการหาค่าประมาณของเบราว์เซอร์เพื่อตรวจสอบผู้ใช้ก่อนที่จะสร้างโทเค็น App Check
เมื่อทํางานกับ SDK ในสภาพแวดล้อมใหม่เหล่านี้ ให้ใช้ FirebaseServerApp ซึ่งเป็นตัวแปรใหม่ของ FirebaseApp ที่ให้วิธีโหลดอินสแตนซ์ Firebase SSR ล่วงหน้าด้วยข้อมูลที่รวบรวมจากฝั่งไคลเอ็นต์
FirebaseServerApp รองรับพารามิเตอร์ 2 รายการ ได้แก่
- โทเค็น Auth ID: หากระบุ Firebase Auth จะลงชื่อเข้าใช้ผู้ใช้ที่ตรวจสอบสิทธิ์ไว้ก่อนหน้านี้โดยอัตโนมัติ ซึ่งอาจครอบคลุมเซสชันใน CSR/SSR
- โทเค็น App Check: หากระบุไว้ Firebase SDK อื่นๆ จะใช้โทเค็นดังกล่าวโดยไม่ต้องเริ่มต้นอินสแตนซ์ของไคลเอ็นต์ App Check (ซึ่งระบบไม่รองรับนอกสภาพแวดล้อมเบราว์เซอร์) ซึ่งจะเป็นการเลิกบล็อกการสนับสนุน SSR สำหรับผลิตภัณฑ์ที่เปิดใช้ App Check เช่น Cloud Functions, Data Connect, Cloud Firestore, Realtime Database และ Vertex AI
ดูตัวอย่างการใช้ FirebaseServerApp ใน Next.js ได้ที่เพิ่มประสิทธิภาพการพัฒนาแอป SSR ด้วย FirebaseServerApp