Web v9版本中如何取消Firestore调用？React项目场景问询

Firebase JS SDK 9.15.0及以上版本已经支持为getDoc/getDocs等一次性读取请求传入AbortSignal来取消请求，旧版本则可以通过标志位忽略后续状态更新来避免警告和无效操作，两种方案如下：

方案一：使用AbortController（SDK ≥9.15.0） #

这是官方支持的真正取消请求的方式，能直接中断Firestore的网络请求：

export default function DisplayPage() {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const getData = async () => {
      try {
        const docRef = doc(db, 'table_name');
        // 将signal作为选项传入getDoc
        const docSnap = await getDoc(docRef, { signal });
        // 确保请求未被取消再更新状态
        if (!signal.aborted) {
          setRecords(docSnap.data() || []);
        }
      } catch (error) {
        // 过滤取消请求导致的AbortError，无需处理
        if (error.name !== 'AbortError') {
          console.error('获取数据失败:', error);
        }
      }
    };

    getData();

    // 组件卸载时触发取消
    return () => abortController.abort();
  }, []);

  // 表格展示逻辑...
}

方案二：标志位忽略状态更新（兼容旧SDK） #

如果无法升级SDK，这种方法不会中断请求，但会避免组件卸载后执行无效的状态更新，消除React的警告：

export default function DisplayPage() {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    let isMounted = true;

    const getData = async () => {
      try {
        const docRef = doc(db, 'table_name');
        const docSnap = await getDoc(docRef);
        // 仅当组件仍挂载时更新状态
        if (isMounted) {
          setRecords(docSnap.data() || []);
        }
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    };

    getData();

    // 组件卸载时标记为已卸载
    return () => {
      isMounted = false;
    };
  }, []);

  // 表格展示逻辑...
}

补充说明 #

• 旧版本Firestore SDK确实没有为一次性读取请求提供取消API，所以方案一需要SDK版本≥9.15.0才能生效；
• 方案二虽然不能中断请求，但能避免无效的状态更新，对应用性能和稳定性没有负面影响。

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