我如何更改 firebase 上快照中的数据

Question

On my project, I create a function to get the data from firebase and then return it but I always get an empty array this my function below

export const pullDataFromFirebase = (collectionName, reducerName) => {
let data = []
    onSnapshot(collection(db, collectionName), (snapshot) => {
        snapshot.docs.map((doc)=>{
            data.push(doc.data())
        })
    })
return data
}

Answer 1

You can't mix the use of promises with Firestore realtime updates. Functions that return a promise ( async function) are meant to return a single result asynchronously. onSnapshot does not return a promise. Instead, it invokes the provided callback whenever the results of the query change.

If you just want to get the data from the Firestore, you can do this instead:

export const pullDataFromFirebase = async (collectionName, reducerName) => {
  const q = query(collection(db, collectionName));
  const querySnapshot = await getDocs(q);
  const documents = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));

  return documents;
}

to access it, you must call the async function and use the .then method. See code below:

pullDataFromFirebase(collectionName)
.then((data) => {
  console.log(data);
});

To listen to changes between snapshots, you can use the sample code from these documentation :

export const pullDataFromFirebase = async (collectionName, reducerName) => {
      onSnapshot(collection(db, collectionName), (snapshot) => {
        snapshot.docChanges().forEach((change) => {
          if (change.type === "added") {
              console.log("Added", change.doc.id, change.doc.data());
              //call a function.
          }
          if (change.type === "modified") {
              console.log("Modified", change.doc.id, change.doc.data());
              //call an function.
          }
          if (change.type === "removed") {
              console.log("Removed", change.doc.id, change.doc.data());
              //call a function
          }
        });
      });
}

You could also use React Hooks , if you prefer. By using useState() and useEffect() . See code below:

  const [data, setData] = useState([]);

  async function pullDataFromFirebase(collectionName, reducerName) {
    const colRef = query(collection(db, collectionName))
    onSnapshot(colRef, (snapshot) => {
      setData(snapshot.docs.map(doc => ({
        doc.data()
      })))
    })
  }

  useEffect(() => {
    pullDataFromFirebase();
  },[])

The code above will be able to set your document's data to the state and be able to use it on another function.