Firebase onSnapshot in react error, "Expected type 'bc', but it was: a custom he object"

Question

I was following this tutorial https://www.sitepoint.com/reddit-clone-react-firebase/ .

Earlier it was really simple just call onSnapshot after the document is fetched, but here it is a separate function, and now here comes the issue, when I try to call that onSnapshot by passing document, but it always says,no matter what type of data I tried to pass it as the first param, it always says, it is not type of 'bc' which it expects.

FirebaseError: Expected type 'bc', but it was: a custom he object

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

Okey, so I had the same problem and I found a solution after struggling with the newest version of firebase for a while. I don't know if you're using a class component or a functional one, in this example i'm using a funcional component but I assume it'll work the same if you replace the react hooks.

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 };
        }, []);

This way your component'll listen to updates everytime the data changes, after that you can personalize it using querys but i wanted to show you a simple example so it's easy to understand.

Answer 2

These kind of errors occur usually when the functions aren't used the way they're supposed to. I can't really tell where the problem comes from in your code but you may try the getDocs method instead and a state variable to store your values

try this code.

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();
}, []);

Answer 3

I had the same problem, unfortunately, the above didn't help me. in my case I was actually importing form functions and types from '@firebase/firestore' and others from 'firebase/firestore'... this was done by autoImport. the moment I made all of them get the types and functions from the same place it worked instantly