React Firestore Hooks读取权限恢复后无法自动更新，求解决方法

react-firebase-hooks的useDocumentData在遇到权限拒绝错误后，会停止后续的实时监听，不会自动重试。要实现权限恢复后自动同步，你需要手动处理错误重试逻辑，或替换为原生Firestore监听并自定义重试机制。

方案一：手动实现带权限重试的Firestore监听 #

放弃直接使用useDocumentData，改用Firestore原生的onSnapshot方法，在权限错误触发时添加重试逻辑：

import { useState, useEffect } from 'react';
import { doc, onSnapshot } from 'firebase/firestore';
import { db } from './firebaseConfig'; // 你的Firestore实例

const useDocumentWithRetry = (docRef) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let unsubscribe;
    let retryTimer;

    const startListening = () => {
      setLoading(true);
      unsubscribe = onSnapshot(docRef, 
        (snapshot) => {
          setData(snapshot.data());
          setError(null);
          setLoading(false);
          if (retryTimer) clearTimeout(retryTimer);
        },
        (err) => {
          setError(err);
          setLoading(false);
          // 判断是否为权限错误
          if (err.code === 'permission-denied') {
            // 每隔5秒重试一次，可根据需求调整间隔
            retryTimer = setTimeout(startListening, 5000);
          }
        }
      );
    };

    startListening();

    // 组件卸载时清理监听和定时器
    return () => {
      if (unsubscribe) unsubscribe();
      if (retryTimer) clearTimeout(retryTimer);
    };
  }, [docRef]);

  return { data, loading, error };
};

// 使用示例
const YourComponent = () => {
  const docRef = doc(db, 'your-collection', 'your-doc-id');
  const { data, loading, error } = useDocumentWithRetry(docRef);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
};

方案二：基于useDocumentData添加重试触发逻辑 #

如果想继续使用useDocumentData，可以通过修改依赖项强制钩子重新初始化监听：

import { useState, useEffect } from 'react';
import { useDocumentData } from 'react-firebase-hooks/firestore';
import { doc } from 'firebase/firestore';
import { db } from './firebaseConfig';

const YourComponent = () => {
  const [retryKey, setRetryKey] = useState(0);
  const docRef = doc(db, 'your-collection', 'your-doc-id');
  const [data, loading, error] = useDocumentData(docRef, { snapshotListenOptions: { includeMetadataChanges: true } });

  useEffect(() => {
    let retryTimer;
    // 检测到权限错误时，定时更新retryKey触发钩子重启
    if (error?.code === 'permission-denied') {
      retryTimer = setTimeout(() => {
        setRetryKey(prev => prev + 1);
      }, 5000);
    }
    return () => {
      if (retryTimer) clearTimeout(retryTimer);
    };
  }, [error]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
};

关键说明 #

• 两种方案的核心都是在权限错误发生后，定时触发监听重启，直到权限恢复并成功获取数据。
• 你可以根据实际场景调整重试间隔，或替换为监听权限相关的触发条件（比如用户角色变化、文档的权限控制字段更新），这样能更精准地触发重试，避免不必要的请求。

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