Блог

При попытке запустить свое приложение я получаю следующую ошибку

 TypeError: Cannot read property 'name' of undefined

 26 | 
  27 |  useEffect(() => {
  28 |    if (roomId) {
> 29 |      db.collection("rooms")
     | ^  30 |        .doc(roomId)
  31 |        .onSnapshot((snapshot) => setRoomName(snapshot.data().name));
  32 | 

  

Я уже определил номера / сообщения и имена в моем firestore. Я импортировал firebase.js файл и добавил также конфигурацию firebase.
Вот фрагмент кода в моем js-файле, из которого он выдает ошибку.

 import db, { auth, provider } from "./firebase";
import firebase from "firebase";
import React, { useState, useEffect } from "react";

.... code ...
function Chat() {

  const { roomId } = useParams();
  const [roomName, setRoomName] = useState("");
  const [messages, setMessages] = useState([]);
  const [{ user }, dispatch] = useStateValue();


  useEffect(() => {
    if (roomId) {
      db.collection("rooms")
        .doc(roomId)
        .onSnapshot((snapshot) => setRoomName(snapshot.data().name));

    }
  }, [roomId]);

  

Любая помощь очень ценится.

Редактировать: это структура базы данных:

Ошибка сообщает вам, что snapshot.data() возвращено undefined. Это может произойти, если в запрошенном вами местоположении (/rooms/{roomId}) нет документа. Вы должны проверить этот случай, прежде чем обращаться к свойствам объекта, который не существует.

 .onSnapshot((snapshot) => {
    const data = snapshot.data();
    if (data) {
        setRoomName(data.name));
    }
    else {
        // decide what you want to do if there is no document
    }
}
  

Поскольку мы не можем видеть вашу базу данных и не можем видеть значение roomId , мы не можем сказать, почему это происходит — вам придется отлаживать свой код и данные, чтобы понять это.

Вместо использования onSnapshot попробуйте использовать метод get

 const getRoom = useCallback(async roomId => {
    if (roomId) {
      const room = await db.collection("rooms")
        .doc(roomId)
        .get();
      setRoomName(room.data().name);
    }
    setRoomName(null);
}, [])

useEffect(() => {
  getRoom(roomId)
}, [getRoom]);