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