我已经建立了一个自定义钩子：

const useFirestoreCollection = async (collectionName) => {

    const [documents, setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const documentsData = [];
            querySnapshot.forEach((doc) => {
                documentsData.push({
                    id: doc.id,
                    ...doc.data(),
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }, []);

    return documents;
};

我可以在我的组件中这样使用它：

const [myData, setMyData] = useState([]);

useFirestoreCollection('registeredUsers')
    .then((data) => {
        setMyData(data); // Data Access
    })
    .catch((error) => {
        console.log(error); // Error
    });

我也可以删除我的自定义钩子中的async：

const useFirestoreCollection = (collectionName) => { <- ASYNC DELETED
    const [documents, setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const documentsData = [];
            querySnapshot.forEach((doc) => {
                documentsData.push({
                    id: doc.id,
                    ...doc.data(),
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }, []);
    return documents;
};

...并在我的组件中这样使用它：

const myData = useFirestoreCollection('registeredUsers')

我曾试图找出什么是最好的方法，但未能做到。
什么时候我应该在钩子中使用async关键字，什么时候不应该？