ChatGPTを使用したアプリ開発記【投げ銭ボタン押下でユーザーネームを取得】

投げ銭したユーザーIDを取得

GiftButton.js

function GiftButton({ toUser }) {
  const [amount, setAmount] = useState(100);
  const [message, setMessage] = useState('');
  const user = useAuth();

  const handleSendGift = async () => {
    if (!user) return;

    await addDoc(collection(db, 'gifts'), {
      //下記でユーザーIDを取得
      fromUser: user.uid,
      toUser,
      amount,
      message,
      createdAt: serverTimestamp()
    });

    alert('🎁 ギフトを送信しました！');
    setMessage('');
    setAmount(100);
  };

     //下記ボタン押下でhandleSendGiftを呼び出す
  return (
      <button
        onClick={handleSendGift}
        className="w-full bg-gradient-to-r from-pink-500 to-purple-600 text-white font-semibold py-2 rounded-md shadow-md hover:from-pink-600 hover:to-purple-700 transition-colors"
      >
        投げ銭🎁 送信
      </button>
 ); 

ユーザーIDの精査

GiftList.js

const userDoc = await getDoc(doc(db, 'users', data.fromUser));

• data.fromUser は Firestore の gifts ドキュメントに保存されている UID。
• doc(db, 'users', data.fromUser) で users コレクション内の該当 UID のドキュメント参照を作成。
• getDoc(...) でそのユーザードキュメントを取得。

GiftList.js

if (userDoc.exists()) {
  fromUserName = userDoc.data().name || '名前未設定';
}

• userDoc.exists() でその UID のユーザーが存在するかをチェック。
• 存在すれば、.data().name で name を取得。無ければ '名前未設定' を代用。
• 結果は fromUserName に格納され、ギフトリスト表示に使われます。

プロフィール画面での表示

profile.js

          <GiftList toUser={uid} />