React使用Firebase获取数据时报Cannot read 'onSnapshot' of undefined错误如何解决

核心错误原因 #

你写的db.collection['posts']语法错误，Firestore的collection是调用方法，需要用小括号传参，方括号会被识别为访问collection对象下的posts属性，该属性不存在所以返回undefined，调用onSnapshot就会抛出对应报错。

修正代码 #

Feed.js 修改部分 #

useEffect(() => {
  // 将方括号改为小括号即可
  db.collection('posts').onSnapshot(snapshot => (
    setPosts(snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data() })))
  ));
}, []);

其他可选检查项 #

• 确认Feed.js顶部已经正确导入db实例，导入路径和你的项目文件结构匹配：import db from './Firebase'
• 确认Firebase.js中的firebaseConfig配置参数完整正确，Firebase初始化没有控制台报错

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