Firebase: snapshot.val не является функцией или ее возвращаемое значение не повторяется

Question

Итак, я создаю небольшое приложение, используя Express, Firebase и ReactJS.Я наткнулся на проблему с Firebase snapshot.val

Эта часть кода на экспрессе обслуживает мои поездки по ID и для получения всех.Для всех поездок работает нормально, но когда я пытаюсь перейти к одиночной поездке, она возвращает мне эту ошибку

, если я деструктурирую ее как массив:

UnhandledPromiseRejectionWarning: TypeError: snapshot.val не является функцией или его возвращаемое значение не может быть повторяемым

Если я деструктурирую его как объект:

TypeError: Невозможно уничтожить свойство trip из 'undefined'или 'null'.

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

Здесь есть экспресс-часть кода:

const firebase = require('firebase');

const reference = () => firebase.database().ref('/trips')

exports.getSingle = async (id) => {
  //const snapshot = await reference()
  //  .orderByChild('id')
  //  .equalTo(id)
  //  .limitToFirst(1)
  //  .once('value');

  // const [trip] = snapshot.val();
  //  return trip
const snapshot = await reference()
    .orderByChild('id')
    .equalTo(parseInt(id, 10))
    .limitToFirst(1)
    .once('value');
  let trip = [];
  snapshot.forEach(function (tripSnapshot) {
    tripStorage = tripSnapshot.val();
    console.log(tripStorage);
    trip.push(tripStorage);
  });
  console.log(trip);
  return trip;
};

exports.getAll = async () => {
  const snapshot = await reference().once('value');

  return snapshot.val();
};

Я выбираю поездки во внешнем интерфейсе с помощью:

 componentDidMount() {
    fetch("/api/trips/get/" + this.state.id)
      .then(res => res.json())
      .then(trip =>
        this.setState({
          trip
        }, () => console.log("Trips fetched...", trip))
      );
  }

Контроллер для поездок:

const express = require('express');

const route = express.Router();
const tripUtil = require('../utils/tripUtil');

route.get('/getAll', async (req, res) => {
  const trips = await tripUtil.getAll();

  res.json(trips);
});

route.get('/get/:id', async (req, res) => {
  const { id } = req.params;
  const trip = await tripUtil.getSingle(id);

  if (trip) {
    res.json(trip);
  } else {
    res.status = 400;
    res.json({
      error: 'trip not found'
    });
  }
});

module.exports = route;

И отображение свойств из объекта следующим образом:

 {this.state.trip.itinerary.days.map((day, i) => {
     return (
       <div key={i} className="trip-single-item__day">
          <div className="trip-single-item__day-header">
              <div className="trip-single-item__day-title">
                 {day.title}
              </div>
              <div className="trip-single-item__day-subtitle">
                 {day.subtitle}
              </div>
              <div className="trip-single-item__day-date">
                 {day.date}
              </div>
          </div>
          <div className="trip-single-item__day-body">
             <div className="trip-single-item__day-descritpion">
               {day.description}
             </div>
          </div>
      </div>
      );
  })}

Вотизображение одиночной поездки одиночная поездка на базе огня

Есть предложения или указания?Спасибо

Answer 1

Firebase обычно рекомендует не хранить данные в виде массивов в базе данных реального времени (хотя существуют некоторые исключения): https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html

Я предполагаю, что по какой-то причине ваше значение снимка неотображается как массив, но объект с числовыми ключами.Одной из причин этого может быть то, что ключи в Firebase не являются строго последовательными, так как Firebase будет отображать ваши данные в виде массива только в том случае, если ключи данных начинаются с 0 и пробелов нет.

Можете ли вы попробовать этокод, чтобы увидеть, работает ли он?

exports.getSingle = async (id) => {
  const snapshot = await reference()
    .orderByChild('id')
    .equalTo(id)
    .limitToFirst(1)
    .once('value');

  const queryResult = snapshot.val()
  console.log(queryResult) // Make note of the object shape here. Make sure there are actually results.

  const trip = Object.values(queryResult)[0]
  return trip;
};

Answer 2

Может быть предупреждением UnhandledPromiseRejection.

Обработайте ваш снимок с помощью then / catch

exports.getSingle = async (id) => {
  await reference()
    .orderByChild('id')
    .equalTo(id)
    .limitToFirst(1)
    .once('value').then(snapshot => {

         const [trip] = snapshot.val();
         return trip

        //  console.log(post.id)  if required
    })
};