title: Firebase || read data from database
body: <p>Below is the older version to read data from firestore</p>
  <pre><code>db.collection('cafes').get().then(snapshot =&gt; {
            snapshot.docs.forEach(doc =&gt; {
            console.log(docs)
           });
       });
  </code></pre>
  <p>I think that's why I am getting db.collection() is not a function.</p>
  <hr />
  <p>But from the present docs, it is like</p>
  <pre><code>async function getcafes(db) {
      const cafesCol = collection(db, 'cafes');
      const cafeSnapshot = await getDocs(cafesCol);
      const cafeList = cafeSnapshot.docs.map(doc =&gt; doc.data());
      console.log(cafeList)
      return cafeList;
  }
  </code></pre>
  <p>So while using console.log(), it is not giving any output.</p>
  <hr />
  <pre><code>&lt;head&gt;
      &lt;script type=&quot;module&quot;&gt;
        import { initializeApp } from &quot;https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js&quot;;
        import {
          getFirestore,
          collection,
          getDocs,
        } from &quot;https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js&quot;;
       
  
        const firebaseConfig = {
        };
  
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);
        const analytics = getAnalytics(app);
        window.db = db; // to make db global variable
  
        async function getcafes(db) {
          console.log('Fetching Cafes');        
          const cafesCol = collection(db, &quot;cafes&quot;);
          const cafeSnapshot = await getDocs(cafesCol);
          const cafeList = cafeSnapshot.docs.map((doc) =&gt; doc.data());
          console.log(cafeList);
          return cafeList;
        }
  
        getcafes() // calling the function
  
      &lt;/script&gt;
  </code></pre>