如何在使用onSnapshot回调时让调用firebase.firestore.set的异步React函数等待？

在使用onSnapshot回调时让调用firebase.firestore.set的异步React函数等待，可以采用以下步骤：

首先，确保你已经正确配置了Firebase和Firestore，并且在你的React组件中正确地引入了相关的依赖。
在React组件中，你可以创建一个异步函数来处理数据的获取和设置操作。例如，你可以创建一个名为getDataAndSet的异步函数。
在getDataAndSet函数中，首先使用onSnapshot方法来监听Firestore文档的变化。onSnapshot方法会返回一个取消监听的函数。
在onSnapshot的回调函数中，你可以使用await关键字来等待异步获取到的数据，并进行一些操作。例如，你可以使用await关键字等待获取到的数据并将其存储在一个变量中。
在获取到数据后，你可以使用firebase.firestore.set方法来更新Firestore中的数据。
为了让调用firebase.firestore.set的异步函数等待，你可以使用Promise来创建一个新的Promise实例，并在resolve回调中执行firebase.firestore.set方法。
在resolve回调中，你可以通过传递获取到的数据来更新Firestore中的文档。
最后，在你的React组件中，你可以调用getDataAndSet函数，并在需要等待异步操作完成时使用await关键字。

下面是一个示例代码：

import React, { useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

const getDataAndSet = async () => {
  const unsubscribe = firebase.firestore().collection('yourCollection')
    .doc('yourDocument')
    .onSnapshot(async (snapshot) => {
      const data = snapshot.data();
      // 对获取到的数据进行操作

      // 创建一个新的Promise实例，并在resolve回调中执行firebase.firestore.set方法
      await new Promise((resolve) => {
        firebase.firestore().collection('yourCollection')
          .doc('yourDocument')
          .set({ /* 更新的数据 */ })
          .then(() => resolve());
      });

      // 在这里可以执行一些回调函数或其他操作
    });

  // 在组件卸载时取消监听
  useEffect(() => {
    return () => unsubscribe();
  }, []);

  // 在需要等待异步操作完成时调用
  await getDataAndSet();
}

const YourComponent = () => {
  useEffect(() => {
    // 调用getDataAndSet函数
    getDataAndSet();
  }, []);

  return (
    // 组件内容
  );
};

export default YourComponent;

这样，当调用firebase.firestore.set的异步函数被触发时，它会等待onSnapshot的回调函数完成之后再执行。这样可以确保在更新Firestore数据之前，获取到的数据是最新的。