Search code examples
reactjsfirebasetypeerrorfetch-api

Error fecthing data: TypeError: collectionRef.get is not a function


I tried getting data from my firebase database but it kept throw a type error "Error fetching data: TypeError: collectionRef.get() is not a function"

` const SelectCategory = () => { const [ data, setData ] = useState([]); const [ selectedOption, setSelectedOption] = useState(null);

    useEffect(() => {
      const fetchData = async () => {
      const collectionRef = collection(db, "categories")
      try {
      const snapshot = await collectionRef.get();`this line seems to be the cause`
      const fecthedData = snapshot.docs.map((doc) => ({
         value: doc.id,
         label: doc.data().foods.Gyms.Restaurants,
      }));
      setData(fecthedData);
      }catch (error) {
        console. Error('Error fetching data: ', error);
        }
      }
      fetchData();
    }, []);
  }`

Solution

  • In firebase version 9 or higher there isn't a .get method on the collection. Instead, you import the getDocs function and use that:

    import { getDocs, collection } from 'firebase/firesore'
    // ...
    const collectionRef = collection(db, "categories")
    try {
      const snapshot = await getDocs(collectionRef);
    

    https://firebase.google.com/docs/firestore/query-data/get-data#web-modular-api_6