React Native/Redux异步请求处理：Firebase网络异常问题咨询

你遇到的这个问题确实是Firebase Firestore的默认特性——当设备离线时，Firestore会缓存请求并等待网络恢复，不会立刻抛出错误，这就导致加载状态一直无法结束。下面给你两个实用的解决方案，结合React Native和Redux来实现：

方案一：提前检测网络状态 #

可以用React Native的网络状态检测工具，在发起Firestore请求前先判断是否有网络，没有的话直接分发失败action并提示用户。

步骤： #

1. 安装网络状态库：

   npm install @react-native-community/netinfo
   # 或者用yarn
   yarn add @react-native-community/netinfo
   

2. 在你的Redux Action中引入并使用：

   import NetInfo from '@react-native-community/netinfo';
   import { Alert } from 'react-native';
   
   export const getProfile = (userUid) => {
     return async (dispatch) => {
       dispatch({ type: GET_PROFILE });
   
       // 先检测当前网络状态
       const networkState = await NetInfo.fetch();
       if (!networkState.isConnected) {
         dispatch({ type: GET_PROFILE_FAIL });
         Alert.alert('提示', '请检查你的网络连接');
         return;
       }
   
       // 网络正常时发起Firestore请求
       const docRef = firebase.firestore().doc('users/' + userUid);
       try {
         const doc = await docRef.get();
         dispatch({ 
           type: GET_PROFILE_SUCCESS,
           payload: doc.data() // 别忘了把用户数据传递给reducer
         });
       } catch (error) {
         dispatch({ type: GET_PROFILE_FAIL });
         Alert.alert('错误', '获取个人资料失败，请稍后重试');
       }
     };
   };
   

   这里我把原本的then/catch改成了async/await风格，代码更简洁易读，你也可以根据习惯保留原来的写法。

方案二：给Firestore请求设置超时 #

如果你不想提前检测网络，也可以给Firestore的请求加一个超时时间，超过设定时间还没响应的话，就判定为网络问题并结束加载状态。

实现代码： #

import { Alert } from 'react-native';

export const getProfile = (userUid) => {
  return (dispatch) => {
    dispatch({ type: GET_PROFILE });

    const docRef = firebase.firestore().doc('users/' + userUid);
    
    // 创建一个超时Promise，5秒后触发错误
    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error('请求超时，请检查网络')), 5000);
    });

    // 用Promise.race同时处理Firestore请求和超时逻辑
    Promise.race([docRef.get(), timeoutPromise])
      .then((doc) => {
        dispatch({ 
          type: GET_PROFILE_SUCCESS,
          payload: doc.data()
        });
      })
      .catch((error) => {
        dispatch({ type: GET_PROFILE_FAIL });
        Alert.alert('提示', error.message);
      });
  };
};

这个方法不需要额外依赖第三方库，直接利用Promise的race特性实现超时判断，适合不想增加项目依赖的场景。

额外优化建议 #

• 可以把网络检测逻辑封装成一个通用工具函数，比如checkNetwork()，在所有需要网络请求的Redux Action中复用，避免重复代码。
• 除了页面内的加载spinner，还可以用全局toast组件提示用户当前状态，体验会更友好。

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