[React/Firebase] TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_23__.default.firestore is not a function 에러 해결

파이어베이스가 버전이 올라가면서 또 문법들이 바뀌어서 생긴 문제이다.

collection.get 이 바뀌었다. getDocs(collection()) 이런 식으로 바뀌었다. 아래의 예시를 참고하자.

 

이전 버전

let db = firebase.firestore();
db.collection("children").get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    console.log(doc.data());
  });
});

 

 

바뀐 버전

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

let db = getFirestore();
getDocs(collection(db, "children")).then((querySnapshot) => {
   querySnapshot.forEach((doc) => {
     console.log(doc.data());
   });
});

 

import 부분도 바꿔주는 것을 잊지말자!