Firebase：snapshot.val不是函数或其返回值不可迭代

Question

So I am creating a small application using Express, Firebase and ReactJS. I stubmled upon issue with Firebase snapshot.val

This part of code on express is serving my trips by ID and to get all. For all trips is working fine but when I try to go to the single trip it returns me this error

if I destructure it as an array:

UnhandledPromiseRejectionWarning: TypeError: snapshot.val is not a function or its return value is not iterable

If I destructure it as a object:

TypeError: Cannot destructure property trip of 'undefined' or 'null'.

and I am totally baffled and can't find the solution.

Here is express part of the code:

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();
};

I am fetching trips in the frontend with:

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

Controller for trips:

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;

And maping properties from object like this:

 {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>
      );
  })}

Here is image of single trip Single trip in firebase

Any suggestions or directions? Thanks

Answer 1

Might be an UnhandledPromiseRejectionWarning.

Handle your snapshot with 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
    })
};

Answer 2

Firebase generally recommends against storing data as arrays in the Realtime Database (though some exceptions exist): https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html

What I'm guessing is going on is that for some reason, your snapshot value is not being rendered as an array, but an object with numeric keys. One reason for this might be if the keys in Firebase are not strictly sequential, as Firebase will only render your data as an array if keys of the data start with 0 and there are no gaps.

Can you try this code to see if it works?

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;
};