My task involves creating a variable to reference a Firestore document.
const userRef = doc(db, 'users', uid)
I want to use it by adding a Realtime listener.
onSnapshot(userRef, (doc) => {
if (doc.exists()){
setCode(code = doc.data().keycode)
} else {
setCode(code = 'N/A')
}
})
However, I encountered this error:
FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
Initially, I thought the issue was with the uid being incorrect, so I tried hard coding it but still faced the same error.
Below is the complete code for a react component where I imported the firebase config from 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
In using React Router, I passed the props accordingly:
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>
);
}