How to get a single doc with React/Firestore?

user_15283114 0
Viewed 4931

All I want to do is to get a row (so called 'doc') from a data base.

so far, I have tried:

all with the 'aref'

  const aref = firebase
    .firestore()
    .collection("polja")
    .where("id", "==", match.params.id);
  console.log(aref);

  function getIt() {
    const item = [];
    setLoading(true);
    aref.get().then((doc) => {
      const data = doc.data();
      setItem(item);
      console.log(item);
      setLoading(false);
    });
  }
  
  useEffect(() => {
    getIt();
  }, []);

this gave the following error:

error

db structure

google-cloud-firestore firebase reactjs javascript
2 Answers

To get a single document, you must specify the document ID:

firebase.firestore().collection("polja").doc(documentId).get().then((snapshot) => {
  console.log(snapshot.data())
}).catch((e) => console.log(e))

Also you should not use .where() to get just a single document, but there is an issue I found in your original code.

If you look carefully, the parameter in .where() is a string "match.params.id". That seems to be a dynamic value being fetched from somewhere else. Please remove the quotes and try again.

firebase.firestore().collection("polja").where("id", "==", match.params.id).get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

Try adding a catch block as shown which might help catch any errors. Make sure your security rules also allow you to fetch the data. Also if any error is logged in the console, share a screenshot of it.

user_131306970

To get single document form firebase firestore you should first know if you are using the modular firebase 9.+ version or firebase version < 9.

In new modular firebase firestore(version 9.+) it should be like this:

import { getFirestore, collection, query, getDocs } from 'firebase/firestore'
async read(id) {
  const firestore = getFirestore()
  const docRef = doc(firestore, this.collectionPath, id)
  const docSnap = await getDoc(docRef)

  const data = docSnap.exists() ? docSnap.data() : null

  if (data === null || data === undefined) return null

  return { id, ...data }
}

If you are using not modular Firebase firestore( < version 9) then the same function should look something like this:

async read(id) {
  const result = await (await firestore())
    .collection(this.collectionPath)
    .doc(id)
    .get()

  const data = result.exists ? result.data() : null

  if (data === null || data === undefined) return null

  return { id, ...data }
}
user_38487970
Related