ファランクス by ponta

firebase : firestore ユーザー別データ取得 / 表示

ベース

  • ルールが初期設定では 読み書き権限がfalseになっておりエラーになる
"use client";
import React, { useEffect, useState } from "react";
import { auth, db } from "../../../../lib/firebase";
import { collection, addDoc, query, where, getDocs } from "firebase/firestore";

const Page = () => {
  const [inputText, setInputText] = useState(""); // 入力されたテキストを保持するstate
  const [memos, setMemos] = useState([]); // メモのリストを保持するstate

  useEffect(() => {
    const fetchMemos = async () => {
      const user = auth.currentUser;
      if (user) {
        const userId = user.uid;
        try {
          const q = query(collection(db, "memos"), where("userId", "==", userId));
          const querySnapshot = await getDocs(q);
          const memosData = querySnapshot.docs.map((doc) => doc.data().title);
          setMemos(memosData);
        } catch (error) {
          console.error("Error fetching memos: ", error);
        }
      }
    };
    fetchMemos();
  }, []);

  // フォームの送信時にメモを追加する関数
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (inputText.trim() !== "") {
      const user = auth.currentUser;
      if (user) {
        const userId = user.uid;
        const value = {
          title: inputText,
          userId: userId, // ユーザーIDを追加
        };
        try {
          await addDoc(collection(db, "memos"), value); // Firestoreにメモを追加
          setInputText(""); // 入力欄をクリア
          console.log("Document successfully written!");
        } catch (error) {
          console.error("Error writing document: ", error);
        }
      }
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="入力してください"
          className="border"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
        />
        <button type="submit">追加</button>
      </form>
      <div>
        <ul>
          {memos.map((memo, index) => (
            <li key={index}>{memo}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Page;
  • userId フィールド (string) を作り、そこに userUID を入れるようにする
  • これにより auth との紐づけができる

← Go home