Блог

Сначала я запрашиваю свои данные из firebase:

 useEffect(() => {
    if (user) {
      async function fetchData() {
        const request = await db
          .collection("users")
          .doc(user)
          .collection("notifications")
          .onSnapshot((snapshot) =>
            setNotifications(
              snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
            )
          );
      }
      fetchData();
    } else {
      setNotifications([]);
    }
  }, [user]);
 

Запрос возвращает это:

Теперь, когда я пытаюсь отобразить данные:

    <div className="notifications">
      {notifications.map((notification) => (
        <NotificationContainer
          notificationType={notification.notificationType}
          notificationFrom={notification.notificationFrom}
          timestamp={notification.timestamp}
          linkId={notification.linkId}
        />
      ))}
 

Когда я пытаюсь отобразить данные на странице, я получаю следующую ошибку:

Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead.

Есть идеи, что я делаю не так? Я думаю, что может быть что-то не так в тот день, когда я считываю данные из своего notifications массива

Короткий ответ где-то в вашем коде, вы пытаетесь отобразить объект. Что-то вроде этого выдаст вам сообщение об ошибке «Объект не является допустимым дочерним элементом React»

 const obj = { a: 1 }

const SomeComponent = () => {
  return (
    <div>{obj}</div>
  )
}
 

В вашем случае я предполагаю, что «уведомление» — это объект, который выглядит следующим образом, firebase возвращает временную метку в формате объекта

 notification: {
  timestamp: {
    seconds: 1700000000,
    nanoseconds: 1700000000000,
  }
}
 

Таким образом, в должно быть где-то, что пытается отобразить этот объект

 return (
  ...
  <div>{timestamp}</div>
  ...
)
 

Если вы найдете это и измените на

 return (
  ...
  <div>{timestamp.seconds}</div>
  ...
)
 

Ошибка должна исчезнуть.

Итак, я использовал поле timestamp firebase. И когда я попытался отобразить его, всплывает неприятная ошибка, о которой я говорил.

Временная метка не является строкой и, скорее всего, является объектом.