Firebase v9 onSnapShot 在异步函数中，同时在 useEffect React 中被调用

Question

我正在使用 Firebase v9，我正在构建一个聊天应用程序，我需要在调用 onSnapShot 获取聊天数据之前做一些异步工作：

      const getChat = async () => {
        // I need to await for user data before doing anything else.
        // I'll need some user data to build the query which
        // I'll be using in onSnapShot later on.
        const user = await getUserData();
        console.log(user);
        
        const collectionRef = collection(db, "messages");
        const q = query(
        collectionRef, where("user_id", "==", user.id), orderBy("createdAt"));
    
        const unsubscribe = onSnapshot(q, (snapshot) => {
          const data = snapshot.docs.map((doc) => {
            const entry = doc.data();
    
            return {
              id: doc.id,
              message: entry.message,
            };
          });
          setChatLines(data);
        });
    
        return unsubscribe;
      };

然后在 useEffect 中：

  useEffect(() => {

    const unsubscribe = getChat();

    return () => {
      unsubscribe();
    };
  }, []);

这里的问题是unsubsribe 是一个promise，因为getChat 是异步的，但我仍然想在调用onSnapShot 之前等待getUserData()，因为稍后我将需要onSnapShot 查询中的用户数据.

有没有办法让这项工作同时能够在 useEffect 清理功能中正确unsubscribe？

Answer 1

在这种情况下，我建议使用 React ref 来保存要在 useEffect 清理函数中使用的取消订阅函数。

const unsubscribeRef = React.useRef();

const getChat = async () => {
  const user = await getUserData();
   
  const collectionRef = collection(db, "messages");
  const q = query(
  collectionRef, where("user_id", "==", user.id), orderBy("createdAt"));

  const unsubscribe = onSnapshot(q, (snapshot) => {
    const data = snapshot.docs.map((doc) => {
      const entry = doc.data();

      return {
        id: doc.id,
        message: entry.message,
      };
    });
    setChatLines(data);
  });

  unsubscribeRef.current = unsubscribe;
};

useEffect(() => {
  getChat();

  return () => {
    unsubscribeRef.current?.();
  };
}, []);

另一种方法是在 useEffect 挂钩回调主体中添加一个额外的异步函数，该函数可以等待 getChat Promise 解决。

useEffect(() => {
  let unsubscribe;

  const getChatAndSubscribe = async () => {
    unsubscribe = await getChat();
  }
    
  getChatAndSubscribe();

  return () => {
    unsubscribe?.();
  };
}, []);