Using async await to get data from firestore:Uncaught TypeError:destroy is not a function/Without async await: querySnapshot.forEach is not a function

Hi I am making a react app in which I want to show detail about product and seller/user. I have seen similar questions like this but that's not working for me. I am using firebase version 9.

The view.js file:

import React, { useContext, useEffect, useState } from 'react';
import { FirebaseContext } from '../../store/Context';
import { collection, query, where, getDocs } from "firebase/firestore";
import './View.css';
import { PostContext } from '../../store/postContext';
import 'firebase/compat/firestore';

function View() {
  const [userDetails,setUserDetails]=useState("")
  const {postDetails}= useContext(PostContext)
  const {firebase}= useContext(FirebaseContext)
  useEffect(async()=>{
    const { userId }=postDetails
    console.log('userId: ');
    console.log(userId);
    const querySnapshot =await getDocs(query(collection(firebase.firestore(), "users"), where("id", "==", userId)));
    querySnapshot.forEach((doc) => {
      console.log("doc.data: ");
      console.log(doc.id, " => ", doc.data());
      console.log(doc.data().username);
      setUserDetails(doc.data())
    })
  },[])
  
  return (
    <div className="viewParentDiv">
      <div className="imageShowDiv">
      <img src={postDetails.url} alt="" />
      </div>
      <div className="rightSection">
        <div className="productDetails">
          <p>&#x20B9; {postDetails.price}</p>
          <span>{postDetails.name}</span>
          <p>{postDetails.category}</p>
          <span>{postDetails.createdAt}</span>
        </div>
        
          <div className="contactDetails">
          <p>Seller details</p>
          <p>{userDetails.username}</p>
          <p>{userDetails.phone}</p>
        </div>
        
      </div>
    </div>
  );
}
export default View;

Here the data is getting from firestore collection with the help of usestate. This codes gets the data from the firebase but nothing is displayed in the screen(displays only a blank white screen), But the fetched data can be seen in the console.

The console shows the data and the following error:

This error disappears when I remove the async await from useEffect, but if I do so This will not fetch the data and shows the following error:

Uncaught TypeError: querySnapshot.forEach is not a function at View.js:18:1

How do I solve this? -- Please help me friends.