db.collection 不是函數 firebase firestore

Question

您好，我正在嘗試使用 firebase 配置 react 應用程序並使用 firestore。

"firebase": "^9.1.3"

我按照官方文檔中給出的說明進行操作。

這是我的 conig.js 文件。

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: '****',    
    authDomain: '*****',    
    projectId: '*****',    
    storageBucket: '*****',    
    messagingSenderId: '****',    
    appId: '*****',
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

我確定這會被初始化。

當我導出它並在其他文件中使用它時。 collection在 vs 代碼中顯示為灰色，這意味着我沒有使用導入。

數據庫服務.js

import { db } from './config';
import { collection, doc } from 'firebase/firestore';

export const getChapters = (scanId) => {
    db.collection('somecollection')
        .doc(scanId)
        .get()
        .then((doc) => {
            if (doc.exists) {
                console.log('Document data:', doc.data());
            } else {
                // doc.data() will be undefined in this case
                console.log('No such document!');
            }
        })
        .catch((error) => {
            console.log('Error getting document:', error);
        });
};

錯誤：類型錯誤： config__WEBPACK_IMPORTED_MODULE_0 _.db.collection 不是函數

我試過兼容和精簡版。 得到同樣的問題。

Answer 1

這是 v8/compat 語法：

db.collection('somecollection')
    .doc(scanId)
    .get()
    .then((doc) => {

在 v9/模塊化語法中，等價物是：

getDoc(doc(db, 'somecollection', scanId))
    .then((doc) => {

為了轉換這種類型的東西，我發現將 Firebase 文檔和升級指南放在手邊最容易。

Answer 2

Firebase 已在版本 9 中將其 API 更改為新的模塊化語法。您使用的是版本 8 中的舊語法。您可以閱讀有關此內容的更多信息並在此處找到有關升級代碼的說明： https : //firebase.google.com/docs/web /模塊化升級

此外，在 Firebase 文檔的任何地方，它們現在都有 2 個單獨的示例：一個用於舊語法，一個或新的模塊化語法： https : //firebase.google.com/docs/firestore/query-data/get-data