Firestore数据更新后自动重新获取实现方案咨询

你当前的代码仅在组件首次渲染时通过getDocs一次性获取Firestore数据，因此无法感知后续的数据变化。要实现数据更新时自动重新获取，需要使用Firestore提供的实时监听API onSnapshot，它会在目标集合或文档发生变化时自动触发回调，更新本地数据。

修改后的完整Hook代码 #

export const useGetUsers = () => {
  const [users, setUsers] = useState<Users[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  // 处理快照数据并获取头像URL
  const processUsersSnapshot = async (querySnapshot: QuerySnapshot) => {
    const userData: Users[] = [];

    await Promise.all(
      querySnapshot.docs.map(async (doc) => {
        const avatarPath: StorageReference = ref(
          storage,
          `users-avatars/${doc.data().uid}`
        );
        try {
          const avatarUrl = await getDownloadURL(avatarPath);
          userData.push({
            ...doc.data(),
            avatar: avatarUrl,
          });
        } catch (error) {
          userData.push({
            ...doc.data(),
            avatar: "",
          });
        }
      })
    );

    return userData;
  };

  useEffect(() => {
    // 注册Firestore实时监听
    const unsubscribe = onSnapshot(collection(db, "users"), async (snapshot) => {
      const data = await processUsersSnapshot(snapshot);
      setUsers(data);
      // 首次加载后将loading设为false，后续更新无需再切换
      setLoading(false);
    }, (error) => {
      // 处理监听错误
      console.error("监听用户数据失败:", error);
      setLoading(false);
    });

    // 组件卸载时取消监听，防止内存泄漏
    return () => unsubscribe();
  }, []);

  return { users, loading };
};

关键修改点说明 #

• 替换getDocs为onSnapshot：onSnapshot会持续监听集合的变化（新增、修改、删除文档），每次变化都会触发回调函数。
• 添加监听清理逻辑：onSnapshot返回一个取消订阅的函数，在useEffect的返回值中调用，确保组件卸载时停止监听，避免内存泄漏。
• 复用数据处理逻辑：将原来的fetchUsers改为processUsersSnapshot，接收快照对象作为参数，保持头像URL获取的逻辑不变。
• 错误处理：新增监听错误的回调，避免因网络或权限问题导致loading一直处于true状态。

关于Storage头像更新的补充 #

如果需要监听用户头像文件本身的变化（而非Firestore中用户数据的变化），可以为Storage的头像文件添加onChange监听：

// 在处理单个用户数据时添加Storage监听
const avatarPath = ref(storage, `users-avatars/${doc.data().uid}`);
const unsubscribeStorage = onChildChanged(avatarPath, async () => {
  const newAvatarUrl = await getDownloadURL(avatarPath);
  // 更新对应用户的头像URL
  setUsers(prevUsers => prevUsers?.map(user => 
    user.uid === doc.data().uid ? {...user, avatar: newAvatarUrl} : user
  ));
});
// 记得在合适的时机取消Storage监听

不过通常情况下，用户头像更新时会同步修改Firestore中的用户数据（比如更新头像更新时间），此时Firestore的onSnapshot会自动触发，重新获取头像URL即可满足需求。

内容的提问来源于stack exchange，提问作者user21209760