title: How to retrieve and load data from a Firestore subcollection using React-Redux-Firebase?
body: <p>I want to fetch a document called <code>settings</code> from a Firestore subcollection, then load it into my local component (and Redux store) as a variable named <code>settings</code> with the following value:</p>
  
  <pre><code>settings: {
    name: 'Waldo Garply',
    email: 'corge@foogle.net',
    mobile: '555-789-1234',
    timestamp: '1546304499032',
  }
  </code></pre>
  
  <p>Instead, my app fails to compile and I get the following error message in my console:</p>
  
  console.error
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'settings' of undefined at Function.mapStateToProps [as mapToProps]</p>
  </blockquote>
  
  <p>What am I doing wrong and how can I achieve my expected behavior?</p>
  
  <p>I am storing my Firestore data as follows.</p>
  
  Firestore
  
  <pre><code>.
  ├── 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
  </code></pre>
  
  <p>Notice, I am storing a unique snapshot of all the settings values (including a timestamp) each time any of the settings values changes; I then fetch the latest setting (sorted by timestamp) and load it. So I am needing an automatic listener on the <code>settings</code> object.</p>
  
  <p>I am using the following code in my component (called DetailsTab.js) to try connect to Firestore to fetch the data then load it as a <code>settings</code> variable into my component and Redux store.</p>
  
  DetailsTab.js
  
  <pre><code>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 =&gt; {
      return [
        {
          collection: 'users',
          doc: props.user.data.uid,
          subcollections: [
            {
              collection: 'settings',
              limit: 1,
              orderBy: ['timestamp', 'desc',],
              storeAs: 'settings',
            },
          ],
        },
      ];
    })
  )(DetailsTab)
  </code></pre>
  
  <p>The following is how the data appears when my console logs it.</p>
  
  console.log
  
  <pre><code>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
  </code></pre>