FirebaseError：collection() 的第一个参数应为 CollectionReference、DocumentReference 或 FirebaseFirestore

Question

我正在尝试创建一个变量来引用 Firestore 文档。

const userRef = doc(db, 'users', uid)

并通过添加实时侦听器来使用它

onSnapshot(userRef,  (doc) => {
        if (doc.exists()){
            setCode(code = doc.data().keycode)
        } else {
            setCode(code = 'N/A')
        }
    })

但它得到了这个错误

FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

一开始以为是uid不对，硬编码了，还是一样的错误。

这是完整的代码，它是一个反应组件。我从 App.js 导入了 firebase 配置

import React, { useState } from 'react'

import { onSnapshot, doc, getFirestore } from 'firebase/firestore'

function Transaction(uid, firebase) {
    const db = getFirestore(firebase);

    let [amount, setAmount] = useState('')
    let [target, setTarget] = useState('')
    let [code, setCode] = useState('')

    const userRef = doc(db, 'users', uid)
    
    const sendNum = async(e) => {
        e.preventDefault();
        console.log('Send Num')
    }

    const generateCode = async(e) => {
        e.preventDefault();
        console.log('Generate Code')
    }


    onSnapshot(userRef,  (doc) => {
        if (doc.exists()){
            setCode(code = doc.data().keycode)
        } else {
            setCode(code = 'N/A')
        }
    })

    return (
        <>
            <form onSubmit={sendNum}>
                <input style={{ width: 200 }}value={amount} onChange={(e) => setAmount(e.target.value)} type="number" placeholder='Amount'/>
                <input style={{ width: 200 }} value={target} onChange={(e) => setTarget(e.target.value)} type="number" placeholder='Keycode'/>
                <br />
                <button className='btn' type='submit'>Send</button>
            </form>
 
            <section>
                <h2>{code}</h2>
                <button className='btn' onClick={generateCode} type='submit'>Generate Code</button>
            </section>
        </>
    )
}

export default Transaction

我使用了 React Router 并在那里传递了道具。

const firebaseConfig = {
  apiKey: "AIzaSyAKLyeY2FbjFDD57Kp9sGDi8uHg3neXxjI",
  authDomain: "digitots-dev.firebaseapp.com",
  projectId: "digitots-dev",
  storageBucket: "digitots-dev.appspot.com",
  messagingSenderId: "150130182744",
  appId: "1:150130182744:web:216e77264273772c94182d",
  measurementId: "G-RJT8Q1LSXZ"
};

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth();
const db = getFirestore();
const provider = new GoogleAuthProvider();

let uid = ''

function App() {
  
  
  return (
    <div className="App">
      
      <header>
        <Router>
          <Nav />
          
          <Switch>
            
            <Route path='/' exact component={MainView} />
            <Route path="/about" component={About}/>
            <Route path='/shop' component={Shop}/>
            <Route path='/admin' component={Admin}/>
            
            <Route
              path='/portal'
              render={(props) => (
                <Transaction {...props}  db={db} uid={uid} firebase={firebaseConfig}/>
              )}
            />
            

          </Switch>
           
        </Router>
      </header>

      
    </div>
  );
}

Answer 1

即使您在doc() 中传递无效参数，错误也会显示Expected first argument to collection()。话虽如此，db 未定义或不是 Firestore 的实例。确保从初始化 Firestore 的文件中导入 db，或者在同一文件中定义：

import { getFirestore, doc } from "firebase/firestore"

const db = getFirestore(app) // const app = initializeApp(fireConfig)

const userRef = doc(db, 'users', uid)

---

关于TypeError: Cannot read property 'getProvider' of undefined 错误：

<Transaction {...props}  db={db} uid={uid} firebase={firebaseConfig}/>

您将 Firebase 配置（一个 JSON 对象）作为参数传递给 getFirestore()，而它需要 Firebase 应用实例。

// Incorrect
const db = getFirestore(firebase);


// Correct
const db = getFirestore(firebaseApp)

将事务组件更改为：

<Transaction {...props} uid={uid} firebase={firebaseApp}/>