Cant connect React App to Firestore movie Collection

Question

I'm creating a disney+ clone in react.js and I have created a collection in firebase firestore which contains different movie titles and movie posters that I want to display on the react app. For some reason the firebase won't connect to the react app and any of my attempts of connecting to firebase and trying to display the movie covers have resulted in nothing showing: The recommended section is where I attempted to display the movie covers but it just displayed an empty section https://i.stack.imgur.com/1u1Mp.png

here is the error message I keep on getting:

Uncaught TypeError: snapshot.data is not a function
    at Array.<anonymous> (Home.js:26:1)
    at next (index.esm2017.js:19299:1)
    at index.esm2017.js:15654:1

Home.js:

import { doc, onSnapshot } from "firebase/firestore";

const Home = (props) => {
    const dispatch = useDispatch()
    const userName = useSelector(selectUserName);
    let recommends = [];
    let newDisneys = [];
    let originals = [];
    let trending = [];
    
    onSnapshot(colRef, (snapshot) => {
        console.log(snapshot.data())
                switch(snapshot.data().type){
                    case 'recommend':
                        recommends = [...recommends, { id: snapshot.id, ...snapshot.data() }];
                        break;

                    case 'new':
                        newDisneys = [...newDisneys, { id: snapshot.id, ...snapshot.data() }];
                        break;

                    case 'original':
                        originals = [...originals, { id: snapshot.id, ...snapshot.data() }];
                        break;

                    case 'trending':
                        trending = [...trending, { id: snapshot.id, ...snapshot.data() }];
                        break;

                }
            });
        

        dispatch(setMovies({
            recommend: recommends,
            newDisney: newDisneys,
            original: originals,
            trending: trending,
        })
        );
      

    useEffect(() =>{
    }, [userName]);

    return(
        <Container>
            <ImgSlider />
            <Viewers />
            <Recommends />
            <NewDisney />
            <Originals />
            <Trending />
        </Container>
    );
};

Recommended.js:

import { useSelector } from "react-redux";
import { selectRecommend } from "../features/movie/movieSlice";

const Recommends = (props) => {
    const movies = useSelector(selectRecommend);
    console.log(movies, ":️");
    return(
        <Container>
            <h4>
                Recommended for You
            </h4>
            <Content>
                {movies &&
                movies.map((movie, key) => (
                <Wrap key={key}>
                    {movie.id}
                    <Link to={`/detail/` + movie.id}>
                        <img src={movie.cardImg} alt={movie.title} />
                    </Link>
                </Wrap>
            ))}
            </Content>
        </Container>
    );
};

firebase.js:

import { initializeApp } from 'firebase/app';
import { getFirestore, collection } from 'firebase/firestore';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
    apiKey: 'AIzaSyBKcoE32BlFeffE6sjlCgKR5v37KFVTwGg',
    authDomain: 'disneyplus-2b68c.firebaseapp.com',
    projectId: 'disneyplus-2b68c',
    storageBucket: 'disneyplus-2b68c.appspot.com',
    messagingSenderId: '55512103767',
    appId: '1:55512103767:web:2b41b0fccb0d831ae71c12',
    measurementId: 'G-EG5QMXCPS5',
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore();
const auth = getAuth(firebaseApp);
const provider = new GoogleAuthProvider();
const storage = getStorage();

const colRef = collection(db, 'books')

export { auth, provider, storage, colRef };
export default db;

For more information, here is my GitHub repos: https://github.com/N00rAhmed/DisneyPlus-Clone

Answer 1

The problem is here:

onSnapshot(colRef, (snapshot) => {
    console.log(snapshot.data())
    switch(snapshot.data().type){
      ...

When you can onSnapshot on a reference to a collection, the result you get is a QuerySnapshot object that contains all documents in that collection. You'll need to loop over all the documents in that query snapshot to be able to check their type, so:

onSnapshot(colRef, (snapshot) => {
  snapshof.forEach((doc) => {
    console.log(doc.data())
    switch(doc.data().type){
      ...

Also see the documentation on getting multiple documents.