title: Collection object returned as undefined using async/await
body: <p>I'm setting up an express app to handle SSR for my react app. I need to access Firebase content on one of my routes which is defined as a boolean in my routes.js file. </p>
  
  <pre><code>export default [
    {
      component: Home,
      path: '/',
      exact: true,
      fetchInitialData: true
    },
    {
      component: About,
      path: '/about',
      fetchInitialData: false
    }
  ];
  </code></pre>
  
  <p>This is imported through my express app as a normal server sided app to determine whether the route has that boolean set to <strong>true</strong>, which I can then pass the outcome of a function as a prop to my app's components.</p>
  
  <pre><code>app.get('*', async (req, res) =&gt; {
  //Get the matching route object for the URL
    const activeRoute = routes.find((route) =&gt; matchPath(url.parse(req.url).pathname, route)) || {}
  
    let interaction = {}
    const context = {};
    const modules = [];
  
  //If the route object has a fetchInitialData boolean as truthy, set interaction to the result of getDownloadURL
    if(activeRoute.fetchInitialData){
      interaction = await getDownloadURL(req.query.id)
    }
  
    //THIS IS UNDEFINED, despite using async/await.
    console.log(interaction)
  
    //Interaction should be set from here. Process rest of app logic
  </code></pre>
  
  <p>I've run into a roadblock with firebase's API, because I cannot include the firebase-admin SDK inside my react app. Therefore I have to run it in the express environment and pass the data down as a prop, hence the reason i'm using a boolean for the required data instead of passing the function directly into the app.
  I can't use the normal firebase-sdk because I need to use the storage getDownloadURL function which uses an XMLHttpRequest which isnt compatible with a server, only a browser!</p>
  
  <p>I have defined my own getDownloadURL function inside the express app file which takes a query parameter as a document id and will process the downloadURL for an image stored inside that document.</p>
  
  <pre><code>const getDownloadURL = (path) =&gt; {
    if(path){
      firestore.collection('interactions').doc(path).get()
        .then(doc =&gt; {
          bucket
          .file(doc.data().photoPath)
          .getSignedUrl({
            action: 'read',
            expires: '03-09-2999'
          })
          .then(photoURL =&gt; {  
            const interaction = {
              date: doc.data().date,
              venue: doc.data().venue,
              photoURL: photoURL
            }
            //console.log(interaction) &lt;&lt;&lt;&lt;&lt; this returns the valid data.
            return interaction;     
          }).catch(e =&gt; console.log(e));
        }).catch(e =&gt; console.log(e));
    }else{
      return {};
    }
  }
  </code></pre>
  
  <p>This will process the firebase document and eventually end up with a photoURL from the storage API which I am returning as an object to the caller.</p>
  
  <p>I have tried to use Promises instead of async/await by following this structure from this guide: <a href="https://tylermcginnis.com/react-router-server-rendering" rel="nofollow noreferrer">https://tylermcginnis.com/react-router-server-rendering</a></p>
  
  <pre><code>  const activeRoute = routes.find((route) =&gt; matchPath(url.parse(req.url).pathname, route)) || {}
  
    const promise = activeRoute.fetchInitialData
      ? getDownloadURL(req.query.id)
      : Promise.resolve()
  
    promise.then((data) =&gt; {
    //Rest of app logic, data is still undefined
  </code></pre>
  
  <p>and instead of returning the object from the function, I've just returned the firebase storage promise and handled the promise from the caller.</p>
  
  <pre><code>const getDownloadURL = (path) =&gt; {
    if(path){
      firestore.collection('interactions').doc(path).get()
        .then(doc =&gt; {
          return bucket
            .file(doc.data().photoPath)
            .getSignedUrl({
              action: 'read',
              expires: '03-09-2999'
            })
        }).catch(e =&gt; console.log(e));
    }else{
      return {};
    }
  }
  </code></pre>
  
  <p>However, the result of this function always is undefined and i'm not sure how to fix it at this point. Any help would be much appreciated. Thank you.</p>