处理侦听器的 Firestore v9 onSnapshot

Question

I have an issue with one part of Firestore. I'm trying to separate all of my data queries in a separate files, so from the front end I don't need to repeat myself with the queries. So in the separate files I'm creating functions that take parameters and return the data. All good so far. When I use getDoc(doc(db, 'Projects', 'id) it work perfectly fine, it returns the section:

const getSection = async (projectID, sectionID) => {
    const docRef = doc(db, `Projects/${projectID}/Sections`, `s${sectionID}`)
    const section = await getDoc(docRef)

    return section.data();
}

But my project requires to use onSnapshot to listen to changes in the database and change the frontend appropriately. Problem is I don't seem to be able to get a handle on the data coming from the onSnapshot listener. I can log the data, but I can't store it in a variable that I can return. Example:

const getSection = async (projectID, sectionID) => {
    const docRef = doc(db, `Projects/${projectID}/Sections`, `s${sectionID}`)
    
    let section = {}
    const unsub = onSnapshot(docRef, (doc) => {
        console.log(doc.data());   // This log the exact data that I want

        section = doc.data();
    })
    console.log(section)    // This return undefined

    return section;         // So this returns absolutely nothing
}

**** EDIT ****

I'm able to do it when I use onSnapshot to access collections:

    const getAllSections = async (sectionID, projectID) => {
        let sections = [];
        const sectionCollectionRef = collection(db, `Projects/${projectID}/Sections`)

        onSnapshot(sectionCollectionRef, (snap) => {
            snap.forEach((section) => {
                sections.push(section.data())
            })
        })
        console.log(sections) // This works perfectly and every time something changes it refreshes the frontend
    
    return sections;
}

So this is what I'm trying to do with getting info from a document, instead of a collection

Answer 1

Since you say you're using react, this should be done in a useEffect, and you should set state each time the new data arrives.

const SomeComponent = () => {
  const [section, setSection] = useState();
  useEffect(() => {
    const docRef = doc(db, `Projects/${projectID}/Sections`, `s${sectionID}`)
    
    const unsub = onSnapshot(docRef, (doc) => {
      setSection(doc.data();
    })
    return unsub
  }, [sectionId]);

  // ... rest of the component which uses `section`
}