Блог

Я пытаюсь создать переменную для ссылки на документ 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 неверен, поэтому я жестко закодировал его и все равно получил ту же ошибку.

Вот полный код, это компонент react. Я импортировал конфигурацию firebase из App.js

 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 и передал туда реквизит.

 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>
  );
}
 

По-видимому, ошибка говорит Expected first argument to collection() , даже если вы передаете недопустимые аргументы doc() . Это, как говорится, db не определено или не является экземпляром Firestore. Убедитесь, что вы импортируете db из файла, в котором вы инициализируете Firestore, или он определен в том же файле:

 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}/>