Erreur Firebase React Hook : impossible de lire la propriété non définie (lecture de '_repo')

Question

J'écris un hook pour obtenir le rôle utilisateur de la base de données en direct dans next js et j'obtiens l'erreur "Impossible de lire la propriété d'undéfini (lire '_repo')". Voilà à quoi ressemble mon crochet

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

const useAuth = () => {
  const [currentUser, setCurrentUser] = useState(null);
  const [role, setRole] = useState(null);
  const router = useRouter();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        setCurrentUser(user);
        state
      

        
        let nodeRef;
        if (user.role === "user") {
          nodeRef = ref(db, `users/${user.uid}/role`);
        } else if (user.role === "trainer") {
          nodeRef = ref(db, `trainers/${user.uid}/role`);
        } else if (user.role === "admin") {
          nodeRef = ref(db, `admins/${user.uid}/role`);
        } else if (user.role === "nutritionist") {
          nodeRef = ref(db, `nutritionists/${user.uid}/role`);
        }

        onValue(nodeRef, (snapshot) => {
          const userRole = snapshot.val();
          setRole(userRole);
        });
      } else {
        setCurrentUser(null);
        setRole(null);
        // Redirect to login page if user is not logged in
        router.push("/login");
      }
    });

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

  return { currentUser, role };
};

export default useAuth;

Voici à quoi ressemble ma configuration Firebase

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getDatabase(app);
const storage = getStorage(app);

export { auth, db, storage };

Voici la structure de ma base de données

- users
  - <user_id>
    - displayName: "User's display name"
    - email: "User's email address"
    - role: "user"
    - ...
- trainers
  - <trainer_id>
    - displayName: "Trainer's display name"
    - email: "Trainer's email address"
    - role: "trainer"
    - ...
- admins
  - <admin_id>
    - displayName: "Admin's display name"
    - email: "Admin's email address"
    - role: "admin"
    - ...
- nutritionists
  - <nutritionist_id>
    - displayName: "Nutritionist's display name"
    - email: "Nutritionist's email address"
    - role: "nutritionist"
    - ...

J'ai essayé cela parce qu'il est évident que je fais quelque chose de mal avec la base de données, mais j'ai essayé de lire la documentation et j'ai toujours des problèmes. Je suis nouveau sur Firebase.

Answer 1

Fourni aux onAuthStateChanged()的回调> 通过 User 对象。它没有 role propriétés.

Cela signifie que les lignes suivantes ne font rien :

let nodeRef;
if (user.role === "user") {
  nodeRef = ref(db, `users/${user.uid}/role`);
} else if (user.role === "trainer") {
  nodeRef = ref(db, `trainers/${user.uid}/role`);
} else if (user.role === "admin") {
  nodeRef = ref(db, `admins/${user.uid}/role`);
} else if (user.role === "nutritionist") {
  nodeRef = ref(db, `nutritionists/${user.uid}/role`);
}

Après avoir exécuté le code ci-dessus, nodeRef 将变为 undefined，然后您将其输入到 onValue il renvoie l'erreur que vous voyez. p>

Si le rôle de l'utilisateur a été ajouté en tant que revendication personnalisée au jeton d'authentification de l'utilisateur, vous devez obtenir le jeton d'identification de l'utilisateur, puis obtenir les revendications requises.

user.getIdTokenResult()
  .then(idToken => {
    const tokenRole = idToken.claims.role;
    // trust it?
    setRole(tokenRole);
  })
  .catch(err => {
    // TODO: Handle token handling errors
  });