Firebase onSnapshot 反应错误，“预期类型'bc'，但它是：一个自定义对象”

Question

我正在关注本教程https://www.sitepoint.com/reddit-clone-react-firebase/。

之前很简单，只是在获取文档后调用 onSnapshot，但这里它是一个单独的函数，现在问题来了，当我尝试通过传递文档来调用 onSnapshot 时，它总是说，不管我试图将什么类型的数据作为第一个参数传递，它总是说，它不是它所期望的“bc”类型。

FirebaseError：预期类型为“bc”，但它是：自定义 he 对象

useEffect(async () => {

        const postsCollection = collection(db, "posts");
        const orderedCollection = query(
            postsCollection,
            orderBy("createdAt", "desc")
        );        
        try {
            onSnapshot(
                orderedCollection, // here I think the problem is!
                (querySnapshot) => {
                    console.log("yahaan se problem hai");
                    console.log(querySnapshot);
                    const _posts = [];

                    querySnapshot.forEach((doc) => {
                        console.log(doc);
                        _posts.push({
                            id: doc.id,
                            ...doc.data(),
                        });
                    });
                    console.log(_posts);

                    // setPosts(_posts);
                },
                (error) => {
                    console.log("error occured: ", error);
                },
                () => {
                    console.log("completed");
                }
            );
        } catch (e) {
            console.log("ye kya drama hai:", e);
        } finally {
            console.log("finally");
        }
    }, []);

Answer 1

好的，所以我遇到了同样的问题，在与最新版本的 firebase 斗争了一段时间后，我找到了解决方案。 我不知道你使用的是类组件还是函数式组件，在这个例子中我使用的是一个函数式组件，但我认为如果你替换反应钩子它会一样工作。

import { getFirestore, collection } from 'firebase/firestore'

const db = getFirestore();
const colRef = collection(db, "team") 
   
const [results, setResults] = useState([]);
        useEffect(() => { 
            let isMounted = true; 
                    onSnapshot(colRef, (snapshot) => { 
                    if (isMounted) {
                    const results= snapshot.docs.map((doc) => {return {...doc.data(), id: doc.id}});
                    setResults(results) 
                    }
                });   
            
            return () => { isMounted = false };
        }, []);

这样，您的组件将在每次数据更改时侦听更新，之后您可以使用查询对其进行个性化设置，但我想向您展示一个简单的示例，以便于理解。

Answer 2

这类错误通常发生在函数没有按应有的方式使用时。我无法确定代码中的问题出在哪里，但您可以尝试使用 getDocs 方法和 state variable 来存储您的值

试试这个代码。

const [Results, setResults] = useState([]);
useEffect(() => {

const FetchedPosts = async () => {
    const querySnapshot = await getDocs(
    collection(db, 'posts'),
    orderBy("createdAt", "desc")
    );
    querySnapshot.forEach((doc) => {
    
        setResults((prevState) => [...prevState, doc.data()]);
    
    });
};

FetchedPosts();
}, []);