接下來，要讀取資料，這是Clould Firestore提供的範例程式

<aside> 💡

firestore Web API提供兩種寫法，一種是namespaced API，是以物件的方式撰寫，另一種是modular API，是以function的方式撰寫，兩者都可以使用，但是，不能混用，由於我們的Config.js是以modular API撰寫，所以，我們的程式都要以以modular API撰寫。我們的範例都是以modular API的方式撰寫。Github copilot或其他生成式AI會提供namespaced API的寫法，請小心不要混用。

</aside>

import { collection, getDocs } from "firebase/firestore"; 

const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

解釋一下範例程式。

先根據前面產生的db，利用collection()，讀取「users」，取得collection後，透過getDocs()讀取collection下的doc。await的語法說明，請參考 async/await。

const querySnapshot = await getDocs(collection(db, "users"));

querySnapshot中會是個陣列，接下來透過forEach()取得陣列內的每一筆資料，這裡要注意的是，doc裡只有id，所有doc裡的欄位要透過doc.data()取得。forEach()的語法說明，請參考 Array方法。

querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

我們將範例程式裡的collection名稱改成我們的collection名稱，並且串連我們的Config.js裡的app，利用getFirestore()取得資料庫:

import app from "@/app/_firebase/Config"
const db = getFirestore(app);
const querySnapshot = await getDocs(collection(db, "系所課程"));

然後，利用getDocs()讀取collection裡的資料:

const querySnapshot = await getDocs(collection(db, "系所課程"));
console.log("系所課程資料：")
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

完整程式碼如下:

import styles from "./course.module.css";
import { getFirestore, collection, getDocs } from "firebase/firestore"; 
import app from "@/app/_firebase/Config"
const db = getFirestore(app);
const querySnapshot = await getDocs(collection(db, "系所課程"));
console.log("系所課程資料：")
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

//<body> is moved to layout.js
export default function Course() {
  return (
  <>
    <header>
      <h1>輔大資管碩士新生資訊系統</h1>
      <p>整合修業規則、課程資訊與師資介紹</p>
    </header>
    <div className="container">
      {/* 修業規則與必選修課程 */}
      <div className="section">
        <div className={styles.main}>
          <h2>修業規則與必選修課程</h2>
        </div>
      </div>
    </div> 
  </>
  )
}

目前還沒把取得的內容放到網頁上，但由於我們把內容以console.log()輸出，所以，在terminal可以看到:

image.png

如何取得欄位內容? 在.data()後面放欄位名稱，就可以取得該欄位的內容了。

querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data().**課程名稱**}`);
});

image.png