【商品管理システムの開発】ロジスティクスタブで Firestoreからデータを取得

コード

app/InventoryPricing.tsx

"use client";

import React, { useEffect, useState } from "react";
import { db } from "@/lib/firebase";
import { collection, getDocs } from "firebase/firestore";
import { productConverter } from "@/lib/productConverter";
import { ProductData } from "@/types/product";

export default function LogisticsInfo() {

  const [products, setProducts] = useState<ProductData[]>([]);
//Firestoreのprodactsコレクションから取得
  useEffect(() => {
    const fetchProducts = async () => {
      const ref = collection(db, "products").withConverter(productConverter);
      const snapshot = await getDocs(ref);
      const data = snapshot.docs.map((doc) => doc.data());
      setProducts(data);
    };

    fetchProducts();
  }, []);

  return (
    <table className="w-full border-collapse text-left text-sm">
      <thead className="bg-gray-100 text-gray-700">
        <tr>
          <th className="p-2 border">保管場所</th>
          <th className="p-2 border">保管温度区分</th>
          <th className="p-2 border">出荷拠点</th>
          <th className="p-2 border">梱包サイズ</th>
          <th className="p-2 border">重量</th>
          <th className="p-2 border">出荷制限</th>
        </tr>
      </thead>
      <tbody>
        {products.map((item, index) => (
          <tr key={index}>
            <td className="p-2 border">{item.storageLocation}</td>
            <td className="p-2 border">{item.temperatureZone}</td>
            <td className="p-2 border">{item.shippingBase}</td>
            <td className="p-2 border">{item.packageSize}</td>
            <td className="p-2 border">{item.weight}</td>
            <td className="p-2 border">{item.shippingRestriction}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

UI