Firebase React Hook エラー: 未定義のプロパティを読み取れません (「_repo」を読み取っています)

Question

次の JS でライブ データベースから userole を取得するフックを作成していますが、「未定義のプロパティを読み取れません ('_repo' を読み取ります)」というエラーが発生します。これが私のフックの外観です

import { useEffect, useState } from "react";
import { useRouter } から "next/router";
import { onAuthStateChanged } from "firebase/auth";
import { auth, db } from "../firebase";

const useAuth = () => {
  const [currentUser, setCurrentUser] = useState(null);
  const [ロール、セットロール] = useState(null);
  const ルーター = useRouter();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (ユーザー) {
        setCurrentUser(ユーザー);
        州
      

        
        ノード参照を許可します。
        if (user.role === "ユーザー") {
          nodeRef = ref(db, `users/${user.uid}/role`);
        } else if (user.role === "トレーナー") {
          nodeRef = ref(db, `trainers/${user.uid}/role`);
        } else if (user.role === "admin") {
          nodeRef = ref(db, `admins/${user.uid}/role`);
        } else if (user.role === "栄養士") {
          nodeRef = ref(db, `栄養士/${user.uid}/role`);
        }

        onValue(nodeRef, (スナップショット) => {
          const userRole = スナップショット.val();
          setRole(userRole);
        });
      } それ以外 {
        setCurrentUser(null);
        setRole(null);
        // ユーザーがログインしていない場合はログインページにリダイレクトします
        router.push("/login");
      }
    });

    
    return () => unsubscribe();
  }、[]);

  return {現在のユーザー、ロール};
};

デフォルトの useAuth をエクスポート;

これが私の Firebase 構成の様子です

// 必要な SDK から必要な機能をインポートします
import {initializeApp} から "firebase/app";
import { getAuth } から "firebase/auth";
import { getDatabase } から "firebase/database";
import { getStorage } から "firebase/storage";

const firebaseConfig = {
  
};

// Firebaseを初期化する
const app = 初期化App(firebaseConfig);
const auth = getAuth(app);
const db = getDatabase(app);
const storage = getStorage(app);

エクスポート { 認証、データベース、ストレージ };

これが私のデータベース構造です

- ユーザー
  - <ユーザーID>
    - displayName: "ユーザーの表示名"
    - 電子メール: 「ユーザーの電子メール アドレス」
    - 役割: 「ユーザー」
    -...
-トレーナー
  - <トレーナーID>
    - displayName: "トレーナーの表示名"
    - メール: 「トレーナーのメールアドレス」
    - 役割：「トレーナー」
    -...
-管理者
  - <admin_id>
    - displayName: "管理者の表示名"
    - 電子メール: 「管理者の電子メール アドレス」
    - 役割: 「管理者」
    -...
- 栄養士
  - <栄養士_id>
    - displayName: "栄養士の表示名"
    - メール: 「栄養士のメールアドレス」
    - 役割：「栄養士」
    - ...

データベースで何か間違ったことをしているのは明らかなので、これを試してみましたが、ドキュメントを読んでみましたが、まだ問題があります。私はfirebaseを初めて使用します。

Answer 1

User オブジェクトを通じて onAuthStateChanged()< 调用/a> に提供されます。 role 属性はありません。

これは、次の行は効果がないことを意味します:

let ノード参照;
if (user.role === "ユーザー") {
  nodeRef = ref(db, `users/${user.uid}/role`);
} else if (user.role === "トレーナー") {
  nodeRef = ref(db, `trainers/${user.uid}/role`);
} else if (user.role === "admin") {
  nodeRef = ref(db, `admins/${user.uid}/role`);
} else if (user.role === "栄養士") {
  nodeRef = ref(db, `栄養士/${user.uid}/role`);
}

上記のコードを実行すると、nodeRef は unknown になり、それを onValue に入力すると、表示されるエラーがスローされます。

ユーザーのロールがカスタム クレーム として ユーザーの認証トークンに追加されている場合は、ユーザーの ID トークンを取得してから、必要なクレームを取得する必要があります。

user.getIdTokenResult()
  .then(idToken => {
    const tokenRole = idToken.claims.role;
    // 信じますか？
    setRole(tokenRole);
  })
  .catch(err => {
    // TODO: トークン処理エラーを処理します
  });