firebase onsnapshot/collectiongroup function not recognized as function-CodePudding

so im trying to use these firebase functions, I have imported them correctly according to documentation of firebase this is my code:

          import React, { useEffect } from "react";
      import "./homePage.css";
      import Header from "./header";
      import Stories from "./stories";
      import { Postdata } from "./postdata";
      import Post from "./post";
      import BottomTabs from "./bottom";
      import { auth, db, userPosts } from "../../firebase";
      import { collectionGroup, addDoc, getDoc, doc } from "firebase/firestore";
      import { onSnapshot, collection } from "firebase/firestore";

      export default class HomePage extends React.Component {
        constructor(props) {
          super(props);
          this.state = {};
        }
        componentDidMount() {
          db.collectionGroup("posts").onSnapshot(snap=>{
            
          })
        }

CodePudding user response：

You are again (see your previous question) mixing up Firestore SDK V8 and V9 syntax.

Look at the V9 example in this documentation page:

const museums = query(collectionGroup(db, 'landmarks'), where('type', '==', 'museum'));

as well as the V9 example in this documentation page about real-time listeners:

const q = query(collection(db, "cities"), where("state", "==", "CA"));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
  //...
});

So, in your case it should be:

const q = collectionGroup(db, 'posts');
onSnapshot(q, (querySnapshot) => {
  //...
});

You should take care to select the correct tab in the documentation examples, i.e. the one titled "Web Version 9 (modular)".