React Native应用Firebase Storage数据传输异常增加排查求助

核心问题分析 #

你遇到的协作者端数据传输量增长问题，结合代码来看，主要源于以下几个逻辑漏洞：

1. Loading状态管理混乱 #

FetchVideos和FetchAudio各自独立设置setLoading(false)，导致其中一个请求命中缓存后，立刻结束加载状态，但另一个请求可能仍在发起网络请求，后台的Firebase调用仍会产生数据传输。

2. Firebase临时URL过期问题 #

getDownloadURL生成的是默认有效期1小时的临时签名URL，协作者设备缓存的URL过期后，Video组件加载时会因URL失效触发隐性的重新请求，导致额外数据消耗。

3. 缓存键名无隔离 #

通用的videoUrls/audioUrls键名可能与其他页面缓存冲突，导致缓存被覆盖，每次进入页面都需要重新请求。

4. 重复触发请求 #

页面focus事件每次触发都会调用两次请求，若存在异步竞态（比如连续触发focus），会导致重复发起Firebase请求。

针对性修复代码 #

1. 统一管理加载状态 #

修改useEffect，等待两个请求全部完成后再结束加载：

const [isFetching, setIsFetching] = useState(false);

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', async () => {
    if (isFetching) return;
    setLoading(true);
    setIsFetching(true);
    // 等待两个请求都完成再更新状态
    await Promise.all([FetchVideos(), FetchAudio()]);
    setLoading(false);
    setIsFetching(false);
  });
  return unsubscribe;
}, [navigation, isFetching]);

2. 重构请求函数，移除内部Loading控制 #

将FetchVideos和FetchAudio改为纯异步函数，移除内部的setLoading(false)：

const FetchVideos = async () => {
  try {
    // 带页面前缀的缓存键，避免冲突
    const cachedData = await AsyncStorage.getItem('PersonligUtveckling_videoCache');
    if (cachedData !== null) {
      const { urls, expiresAt } = JSON.parse(cachedData);
      // 缓存有效期设为55分钟，提前避免过期
      if (Date.now() < expiresAt) {
        console.log('使用有效缓存视频URL');
        setVideoUrls(urls);
        return;
      }
      console.log('视频缓存过期，重新获取');
    }
    // 未命中缓存或缓存过期时请求Firebase
    const storage = getStorage();
    const listRef = ref(storage, "PersonligUtveckling/videos/");
    const res = await listAll(listRef);
    const urls = await Promise.all(
      res.items.map(itemRef => getDownloadURL(itemRef))
    );
    // 存储URL和过期时间
    const cacheData = {
      urls,
      expiresAt: Date.now() + 55 * 60 * 1000
    };
    setVideoUrls(urls);
    await AsyncStorage.setItem('PersonligUtveckling_videoCache', JSON.stringify(cacheData));
  } catch (error) {
    console.log('视频请求错误:', error);
  }
};

const FetchAudio = async () => {
  try {
    const cachedData = await AsyncStorage.getItem('PersonligUtveckling_audioCache');
    if (cachedData !== null) {
      const { urls, expiresAt } = JSON.parse(cachedData);
      if (Date.now() < expiresAt) {
        console.log('使用有效缓存音频URL');
        setAudioUrls(urls);
        return;
      }
      console.log('音频缓存过期，重新获取');
    }
    const storage = getStorage();
    const listRef = ref(storage, "PersonligUtveckling/audio/");
    const res = await listAll(listRef);
    const urls = await Promise.all(
      res.items.map(itemRef => getDownloadURL(itemRef))
    );
    const cacheData = {
      urls,
      expiresAt: Date.now() + 55 * 60 * 1000
    };
    setAudioUrls(urls);
    await AsyncStorage.setItem('PersonligUtveckling_audioCache', JSON.stringify(cacheData));
  } catch (error) {
    console.log('音频请求错误:', error);
  }
};

额外排查方向 #

1. 协作者设备是否清除过应用数据或重装过应用，导致缓存丢失，首次打开必须全量请求。
2. 若文件无需权限控制，可在Firebase控制台设置永久签名URL，彻底解决URL过期问题。
3. 可添加版本标记，当Firebase存储文件更新时，主动触发客户端缓存更新。

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