Firebase

【Firebase】Firestore Databaseに保存しているプロフィール情報を更新する

作成日：2022年03月07日

更新日：2022年03月08日

前回は、プロフィール画面にデフォルトでユーザー情報を表示しました。

【Firebase】プロフィール画面にデフォルトでユーザー情報を表示する

今回は、Firestore Database に保存しているプロフィール情報を更新します。

まずは、Firebase Database に保存している users のドキュメント ID をプローフィール情報に追加します。

userProfile.ts のプロフィール情報は、getDocs のdoc.data()で取得しています。

ドキュメント ID は、doc.idで取得することができます。

doc.idを docData へ追加します。

tsx
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  const docData = doc.data();
  docData.id = doc.id;
  setProfile(docData);
});

次に、Profile.tsx へ移動し、ユーザー情報を取得します。

Firestore Database の情報を更新するには、docとupdateDocを使用します。

firebase/firestoreからdocとupdateDocをインポートします。

tsx
import { addDoc, collection, doc, updateDoc } from "firebase/firestore";

単一のユーザー情報を取得するには、docを使用します。

以前設定した、firebaseApp から firestore をインポートします。

Firebase の設定は、こちらをご覧ください。

【Firebase】Firebase Project Configを設定する

【Firebase】Firestore Databeseのデータを、フロントエンドに表示する

docの第一引数には、Firebase Database の設定をしているfirestore、第二引数には、コレクションである『users』、第三引数には、先程設定したドキュメント ID があるprofile.idを指定します。

tsx
const userRef = doc(firestore, "users", profile?.id);

ユーザー情報を更新するには、updateDocを使用します。

getDownloadURLの中で、profileがある場合はupdateDocを指定し、profileがない場合はaddDocを指定します。

imageがない場合も同様に指定しておきましょう。

tsx
try {
  const uid = user.user!.uid;
  const docRef = collection(firestore, "users");

  if (image) {
    const imageRef = ref(firestorage, image.name);

    uploadBytes(imageRef, image).then(() => {
      getDownloadURL(imageRef).then(async (url) => {
        if (profile) {
          const userRef = doc(firestore, "users", profile?.id);
          await updateDoc(userRef, {
            name,
            image: url,
          });
        } else {
          await addDoc(docRef, {
            name,
            image: url,
            uid,
          });
        }
      });
    });
  } else {
    if (profile) {
      const userRef = doc(firestore, "users", profile?.id);
      await updateDoc(userRef, { name });
    } else {
      await addDoc(docRef, { name, image: "", uid });
    }
  }
  setSuccess(true);
} catch (err) {
  console.log(err);
  setError(true);
}

Button や Alert も profile がある場合は『更新』、profile がない場合は『作成』と表示されるようにします。

tsx
<Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
  {profile ? "更新" : "作成"}
</Button>

tsx
{
  error && (
    <Alert severity="error">{profile ? "更新" : "作成"}できませんでした</Alert>
  );
}
{
  success && (
    <Alert severity="success"> {profile ? "更新" : "作成"}しました</Alert>
  );
}

では、動作確認します。

ユーザー名を『テスト 2 号』にしてみます。

更新ボタンをクリックすると、

メッセージが表示されました。

Firebase Database でユーザー情報を確認すると、

テスト 2 号へ変更されていました。

ちなみに、ユーザーが存在しない場合は、ボタンが『作成』になっていました。

再度作成ボタンをクリックすると、

『作成しました』というメッセージになっていました。

ついでに、ヘッダーのアバターも登録している画像へ変更します。

Header.tsx

tsx
const profileData = useProfile();
const profile = profileData.profile;

tsx
<Avatar src={profile ? profile.image : ""} alt="" />

次回は、メッセージにプロフィール情報を追加し、Firestore Database に保存します。

【Firebase】メッセージにプロフィール情報を追加し、Firestore Databaseに保存する

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【Firebase】Firestore Databaseに保存しているプロフィール情報を更新する

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する