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

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;