如何在 React 应用程序中从 firebase v9 获取单个文档？

Question

I have this useDocument Hook to fetch a single document from a Firebasev9 by passing id of the document. Can I get the document by passing a slug instead of id?

useDocument Hook

import { useEffect, useState } from "react"
// firebase import
import { doc, onSnapshot } from "firebase/firestore"

import { db } from "../firebase/config"

export const useDocument = (c, id) => {
  const [document, setDocument] = useState(null)
  const [error, setError] = useState(null)
  // realtime document data
  useEffect(() => {
    const ref = doc(db, c, id)

    const unsubscribe = onSnapshot(
      ref,
      (snapshot) => {
        // need to make sure the doc exists & has data
        if (snapshot.data()) {
          setDocument({ ...snapshot.data(), id: snapshot.id })
          setError(null)
        } else {
          setError("No such document exists")
        }
      },
      (err) => {
        console.log(err.message)
        setError("failed to get document")
      }
    )

    // unsubscribe on unmount
    return () => unsubscribe()
  }, [c, id])

  return { document, error }
}

Answer 1

If you have the slug as a field in the document data then you can use a Query to get that document as shown below:

// Query to fetch documents where slug field is equal to given SLUG 
const q = query(collection(db, c), where("slug", "==", SLUG))

onSnapshot(q, snap => {
  if (!snap.empty) {
    const data = snap.docs[0].data() 
    // snap.docs would be an array with 1 document
    // There could be multiple in case multiple posts have same slug by chance  
    console.log(data)
  } else {
    console.log("No documents found with given slug")
  }
})

Answer 2

you could do smth like

import { useEffect, useState } from "react"
// firebase import
import { doc, onSnapshot } from "firebase/firestore"

import { db } from "../firebase/config"

const useDocumentHook = (slug) => {
  const [doc, setDoc] = useState(null)
  useEffect(() => {
    const docRef = db.collection("posts").doc(slug)
    const unsubscribe = onSnapshot(docRef, (doc) => {
      setDoc(doc)
    })
    return () => unsubscribe()
  }, [slug])
  return doc
}