title: Uncaught TypeError: firebase_firestore__WEBPACK_IMPORTED_MODULE_3__.doc.data is not a function
body: <p>I'm creating a ToDo app with react. I decided to use firebase/firestore as my database. But I came across a problem when I wanted to grab data from the database ( I have already manually added dummy data to the firestore database ). I suspect it is an export/import problem but I think it is bigger than that.
  This is my firebase.js file</p>
  <pre><code>import { initializeApp } from &quot;firebase/app&quot;;
  import {getAuth} from 'firebase/auth';
  import { getFirestore } from &quot;firebase/firestore&quot;;
  
  
  const firebaseConfig = {
    ///
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app)
  const db = getFirestore(app);
  export { auth, db };
  </code></pre>
  <p>This is where I'm importing the instance db to</p>
  <pre><code>import React, {useState, useEffect} from 'react'
  import AdminUsers from './AdminUsers'
  import { db } from '../../firebase';
  import { doc, onSnapshot, collection, query, where } from &quot;firebase/firestore&quot;;
  
  const AdminSideBar = () =&gt; {
      
      const [users, setUsers] = useState([]);
  useEffect(() =&gt; {
      const q = query(collection(db, 'users'))
      console.log(q);
      const unsub = onSnapshot(q, (querySnapshot) =&gt; {
        console.log('data', querySnapshot.docs.map(d =&gt; doc.data()))
      })
    }, []);
        
    return (
      &lt;div&gt;
          &lt;h1&gt;Admin Sidebar&lt;/h1&gt;
          &lt;AdminUsers /&gt;
          {users.map(user =&gt; (
              &lt;AdminUsers 
                  key={user.id} 
                  id={user.id} 
                  name={user.data.name} 
              /&gt;
          ))}
      &lt;/div&gt;
    )
  }
  
  export default AdminSideBar
  </code></pre>
  <p>And Im getting this error on the browser console</p>
  <pre><code>Uncaught TypeError: firebase_firestore__WEBPACK_IMPORTED_MODULE_3__.doc.data is not a function
  </code></pre>