Firebase.db.collection 不是函数 || Firebase v9 ||将集合文档设置为状态时引发错误

Posted 2023-02-16

【中文标题】Firebase.db.collection 不是函数 || Firebase v9 ||将集合文档设置为状态时引发错误

【英文标题】：Firebase.db.collection is not a function || Firebase v9 || throws error when setting collection documents to state

【发布时间】：2022-01-20 06:58:24

【问题描述】：

我正在使用 Firebase v9 开发 Expo React Native 项目。出于某种原因，我能够收听 Firestore 中的“聊天”集合并成功地控制台记录它们或将它们设置为变量，但是一旦我尝试将它们设置为一个状态，我就会收到此错误：

“TypeError：_firebase.db.collection 不是函数。（在 '_firebase.db.collection("chats")' 中，'_firebase.db.collection' 未定义）”

例如，这个 useEffect 正确地将我想要的对象数组打印到控制台：

useEffect(
    () =>
      onSnapshot(collection(db, "chats"), (snapshot) =>
        console.log(
          snapshot.docs.map((doc) => (
            id: doc.id,
            data: doc.data(),
          ))
        )
      ),
    []
  ); 

但是，一旦我将 console.log 换成 setChats，就会出现上述错误。

useEffect(
    () =>
      onSnapshot(collection(db, "chats"), (snapshot) =>
        setChats(
          snapshot.docs.map((doc) => (
            id: doc.id,
            data: doc.data(),
          ))
        )
      ),
    []
  );

我也正确地从 React 导入了 useState。我还可以将这些快照文档设置为一个变量，但如果我尝试使用该变量设置状态（即：setChats(myVar);），我会收到此错误。

我已经被困在这个问题上好几个小时了，我一生都无法理解为什么会出现这个错误。有任何想法吗？谢谢！ ????

【参考方案1】：

也许尝试初始化一个空数组并将您的文档推送到它。然后设置聊天（数组）。像这样的...

useEffect(
const data = []
    () =>
      onSnapshot(collection(db, "chats"), (snapshot) =>
        
          snapshot.docs.map((doc) => (
            data.push(id: doc.id,
            data: doc.data(),)
            
          )
          setChats(data)
        )
      ),
    []
  );

【参考方案2】：

将数据推入数组然后进入使用状态对我有用

  useEffect(() => 
    const q = query(collection(db, 'posts'))
    onSnapshot(q, (querySnapshot) => 
      const posts = []
      querySnapshot.forEach((doc) => 
        posts.push( id: doc.id, data: doc.data() )
      )

      setPosts(posts)
    )
  , [])