React中Firebase Storage Context异步调用无返回值问题咨询

• React Context 本身完全支持异步逻辑，你遇到的问题是异步函数写法错误导致，和Context的能力无关。
• getUserData 虽然声明了 async 关键字，但没有返回内部异步操作的Promise。async函数如果没有显式返回值，会默认返回resolve状态的undefined，所以你在组件里await getUserData()会立刻执行完成，不会等待Firebase查询逻辑结束。
• 代码存在变量名拼写错误：你声明的状态是[fileURLs, setFilesURL]，但后续使用了未定义的filesUploaded、setFilesUploaded变量，会导致逻辑报错。

第一步：修改 StorageContext.js #

import React, { useContext, useState } from 'react';
import fire from './FirebaseConfig';
import { useAuth } from './AuthContext';

const StorageContext = React.createContext();

export function useStorage() {
  return useContext(StorageContext);
}

export function StorageProvider({ children }) {
  const { currentUser } = useAuth();
  // 统一变量命名
  const [fileURLs, setFileURLs] = useState([]);
  // 可选新增加载、错误状态，方便组件处理不同交互场景
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  async function getUserData() {
    // 手动返回Promise，让外部调用可以正常await等待结果
    return new Promise((resolve, reject) => {
      if (!currentUser) return reject(new Error("用户未登录"));
      setLoading(true);
      setError(null);
      const storage = fire.storage();
      const storageRef = storage.ref(currentUser.uid);
      
      storageRef.listAll()
        .then(result => {
          const uploadedFiles = [];
          result.items.forEach(imageRef => {
            uploadedFiles.push(imageRef.name);
          });
          setFileURLs(uploadedFiles);
          setLoading(false);
          // 将查询结果返回给外部调用方
          resolve(uploadedFiles);
        })
        .catch(error => {
          setError(error);
          setLoading(false);
          reject(error);
        });
    })
  }

  const value = { getUserData, fileURLs, loading, error };
  return (
    <StorageContext.Provider value={value}>
      {children}
    </StorageContext.Provider>
  );
}

第二步：修改 Dashboard.js #

推荐用法：直接消费Context托管的状态 #

import React, { useEffect } from 'react';
import { useStorage } from './Contexts/StorageContext';

export default function Dashboard() {
  const { getUserData, fileURLs, loading, error } = useStorage();

  useEffect(() => {
    getUserData();
  }, []);

  if (loading) return <div>加载中...</div>
  if (error) return <div>加载失败：{error.message}</div>

  return (
    <div>
      <h3>用户文件列表：</h3>
      {fileURLs.map((fileName, index) => (
        <div key={index}>{fileName}</div>
      ))}
    </div>
  );
}

特殊场景用法：调用后立刻获取返回值 #

import React, { useState, useEffect } from 'react';
import { useStorage } from './Contexts/StorageContext';

export default function Dashboard() {
  const { getUserData } = useStorage();
  const [localFiles, setLocalFiles] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getUserData();
        console.log("拿到的文件数据：", data);
        setLocalFiles(data);
      } catch (err) {
        console.error("查询失败：", err);
      }
    }
    fetchData();
  }, []);

  return <div>文件数量：{localFiles.length}</div>
}

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