Как извлечь и загрузить данные из подколлекции Firestore, используя React-Redux-Firebase?

Question

Я хочу получить документ с именем settings из подколлекции Firestore, а затем загрузить его в мой локальный компонент (и хранилище Redux) как переменную с именем settings со следующим значением:

settings: {
  name: 'Waldo Garply',
  email: 'corge@foogle.net',
  mobile: '555-789-1234',
  timestamp: '1546304499032',
}

Вместо этого мое приложение не компилируется, и я получаю следующее сообщение об ошибке в моей консоли:

console.error

Uncaught TypeError: Невозможно прочитать свойства 'settings' из undefined в Function.mapStateToProps [as mapToProps]

Что я делаю не так и как мне добиться ожидаемого поведения?

Я храню данные моего Firestore следующим образом.

Firestore

.
├── users
|   ├── OGk02kJbQUesTeVhTrLBnERSxrfm
|   |   ├── settings
|   |   |   ├── VrxDnSxpUw6wgX0n9c1FbapmLaLa
|   |   |   |   ├── name: Waldo Garply
|   |   |   |   └── timestamp: 1546304499030
|   |   |   ├── cGVHxSkU3Lcb9WAYWjnJKcLOTYf8
|   |   |   |   ├── name: Waldo Garply
|   |   |   |   ├── email: corge@foogle.net
|   |   |   |   └── timestamp: 1546304499031
|   |   |   ├── qoDYG2xloEvUUhGQyF9zXy9MTMIq
|   |   |   |   ├── name: Waldo Garply
|   |   |   |   ├── email: corge@foogle.net
|   |   |   |   ├── mobile: 555-789-1234
|   |   |   |   └── timestamp: 1546304499032

Обратите внимание,Я сохраняю уникальный снимок всех значений параметров (включая метку времени) каждый раз, когда изменяется любое из значений параметров;Затем я получаю последние настройки (отсортированные по метке времени) и загружаю их.Поэтому мне нужен автоматический прослушиватель для объекта settings.

Я использую следующий код в своем компоненте (называемый DetailsTab.js), чтобы попытаться подключиться к Firestore для получения данных, а затем загрузить их как *Переменная 1020 * в мой компонент и хранилище Redux.

DetailsTab.js

function mapStateToProps( state ) {
  console.log('state\n', state);
  return {
    user: state.auth.user,
    // attempted all the following individually
    settings: state.firestore.data.users.settings, // throws error
    settings: state.firestore.ordered.users.settings, // throws error
    settings: state.firestore.ordered.users[0] // throws error
    settings: state.firestore.ordered.users // returns 'users' object
  }
}

export default compose(
  withStyles(styles, { withTheme: true }),
  connect(mapStateToProps, mapDispatchToProps),
  firestoreConnect(props => {
    return [
      {
        collection: 'users',
        doc: props.user.data.uid,
        subcollections: [
          {
            collection: 'settings',
            limit: 1,
            orderBy: ['timestamp', 'desc',],
            storeAs: 'settings',
          },
        ],
      },
    ];
  })
)(DetailsTab)

Ниже показано, как данные отображаются, когда моя консоль регистрирует их.

console.log

state
└── firestore
    ├── data
    |   └── users
    |       └── OGk02kJbQUesTeVhTrLBnERSxrfm
    |           └── settings
    |               └── qoDYG2xloEvUUhGQyF9zXy9MTMIq
    |                   ├── name: Waldo Garply
    |                   ├── email: corge@foogle.net
    |                   ├── mobile: 555-789-1234
    |                   └── timestamp: 1546304499032
    ├── ordered
    |   └── users [Array(1)]
    |       └── 0
    |           ├── id: OGk02kJbQUesTeVhTrLBnERSxrfm
    |           └── settings [Array(1)]
    |               └── 0
    |                   ├── id: qoDYG2xloEvUUhGQyF9zXy9MTMIq
    |                   ├── name: Waldo Garply
    |                   ├── email: corge@foogle.net
    |                   ├── mobile: 555-789-1234
    |                   └── timestamp: 1546304499032

Answer 1

Решением было добавить соответствующие средства защиты от ошибок следующим образом.

function mapStateToProps( state ) {
  console.log('state\n', state);
  const settings = state.firestore.ordered.users
                && state.firestore.ordered.users[0]
                && state.firestore.ordered.users[0].settings
                && state.firestore.ordered.users[0].settings[0];
  return {
    user: state.auth.user,
    settings,
  }
}