UIコード
Profile.js
{profile ? (
<div className="bg-white p-4 rounded-lg shadow-md">
{profile.photoURL && (
<img
src={profile.photoURL}
alt="プロフィール画像"
className="w-24 h-24 rounded-full mb-4"
/>
)}
<p><strong>名前：</strong>{profile.name}</p>
<p><strong>自己紹介：</strong>{profile.bio}</p>
</div>
) : (
<p>読み込み中...</p>
)}
</div>
Firestoreからデータを取得するロジック
Profile.js
useEffect(() => {
const fetchUserProfile = async () => {
try {
// db: これは Firestore のデータベースインスタンスです。import { db } from './FireBase' のようにインポートされているはずです。
// doc(): これは Firestore の doc メソッドで、指定したコレクション（ここでは 'users'）とドキュメント ID（ここでは userId）を使って、特定のドキュメントへの参照を作成します。
// userId: この値は現在表示しているユーザーの ID です。例えば、userId = 'abc123' のように渡されます。
const userRef = doc(db, 'users', userId);
// getDoc(): これは Firestore の getDoc メソッドで、指定したドキュメント参照（ここでは userRef）からデータを取得する非同期関数です。このメソッドはドキュメントのスナップショット（DocumentSnapshot）を返します。
// await: getDoc は非同期操作なので、await を使ってデータの取得が完了するまで待機します。
// userRef: 先ほど作成した、users コレクションの特定のユーザーに対応するドキュメントへの参照です。
// { source: isOnline ? 'default' : 'cache' }: このオプションは、データの取得方法を指定します。
// source: データをどこから取得するかを指定するオプションで、'default'（通常のデータ取得）か 'cache'（オフラインキャッシュからのデータ取得）を選べます。
// isOnline: ネットワーク接続がオンラインかどうかを確認するフラグで、オンラインの場合は通常のデータ取得を行い、オフラインの場合はキャッシュから取得します。
const userSnap = await getDoc(userRef, { source: isOnline ? 'default' : 'cache' });
if (userSnap.exists()) {
setProfile(userSnap.data()); // ← name や bio を含むオブジェクトをセット
} else {
setProfile({ name: '未設定', bio: 'プロフィールが設定されていません' });
}
} catch (err) {
setProfile({ name: '未設定', bio: 'オフライン中です' });
}
};
if (userId) {
fetchUserProfile();
}
}, [userId]);
Firestoreの構成
UI
