React自定义Hook中async关键字的使用时机：异步vs非异步取数

首先明确：你第一种给自定义Hook加async的写法不符合React Hook规则，是错误用法，第二种移除async的写法才是正确的方向。下面详细解释原因和适用场景：

为什么不能给自定义Hook本身加async？ #

React对Hook有严格的规则约束：

• Hook必须在组件的顶层同步执行，不能在异步回调、条件判断或循环中调用。
• async函数的返回值是Promise，而自定义Hook的设计目的是封装状态逻辑，返回的应该是同步的状态值（比如useState维护的数组、对象等）。如果Hook返回Promise，组件无法在渲染流程中直接使用这个值，必须额外通过useState二次存储，完全违背封装初衷，还会增加不必要的复杂度。

你第一种写法里，虽然Hook内部的useState和useEffect能正常执行，但返回的documents被包裹在Promise中，组件必须用.then接收，本质是多做了一层无意义的包装，而且这种写法很容易触发React的Hook规则报错。

正确的异步处理方式：在Hook内部的回调中用async #

像你第二种写法那样，在Hook内部的useEffect（或其他回调函数）中定义async函数处理异步逻辑，通过useState维护数据、加载状态、错误状态，最后返回同步的状态值，这是自定义Hook处理异步请求的标准模式。

可以优化你的Hook，增加加载和错误状态，同时补上依赖数组：

const useFirestoreCollection = (collectionName) => {
    const [documents, setDocuments] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const querySnapshot = await getDocs(collection(db, collectionName));
                // 用map替代forEach，写法更简洁
                const documentsData = querySnapshot.docs.map(doc => ({
                    id: doc.id,
                    ...doc.data()
                }));
                setDocuments(documentsData);
                setError(null);
            } catch (err) {
                setError(err);
                setDocuments([]);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, [collectionName]); // 依赖collectionName，确保参数变化时重新发起请求

    return { documents, loading, error };
};

组件中使用时可以直接拿到完整状态：

const { documents: myData, loading, error } = useFirestoreCollection('registeredUsers');

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

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

总结：自定义Hook何时用async？ #

• 永远不要让自定义Hook本身是async函数：这违反React Hook规则，会导致返回Promise，破坏组件渲染流程。
• 仅在Hook内部的异步回调中使用async：比如useEffect里的请求函数、useCallback定义的异步操作函数等，用来处理具体的异步任务，再通过useState同步状态到Hook的返回值中。

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