React项目Chrome浏览器编译失败，提示collection、unSub未定义该如何解决？

collection未定义报错（对应Line10、Line22） #

你的自定义Hook未声明collection作为入参，函数内部和useEffect依赖数组中直接调用该变量时，没有对应的变量声明，因此触发未定义报错。需要在Hook定义处补充collection入参。

unSub未定义报错（对应Line20） #

JavaScript变量名大小写敏感，你在useEffect内定义的监听取消变量名为unsub（小写开头），清理函数中调用的是unSub（大写S开头），二者为不同变量，因此触发未定义报错，需要统一变量名。

额外运行时错误修复 #

你使用的Firestore快照监听方法名拼写错误，正确为驼峰格式onSnapshot，全小写的onsnapshot会在后续运行时触发方法不存在的报错，需同步修正。

修正后完整代码 #

import { useState, useEffect } from "react";
import { projectFirestore } from '../firebase/Config';

// 补充collection作为入参
const useFirestore = (collection) => {
    const [docs, setDocs] = useState([]);

    useEffect(() => {
       const unsub = projectFirestore.collection(collection)
        .orderBy('createdAt', 'desc')
        // 修正方法名为驼峰格式
        .onSnapshot((snap) => {
            let documents = [];
            snap.forEach(doc => {
                documents.push({ ...doc.data(), id: doc.id});
            });
            setDocs(documents);
        });

        // 统一变量名为小写unsub
        return () => unsub();

    }, [collection])

    return { docs };
}

export default useFirestore;

调用说明 #

使用该Hook时传入你要监听的Firebase集合名称即可，示例：
const { docs } = useFirestore('images')
将images替换为你的实际集合名。

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