title: How to solve this: TypeError: Cannot destructure property 'title' of 'collections' as it is undefined
body: <p>This is the data that I fetched from firestore and I want to use it in my application to show the product details but I can't retrieve it into my application. Example, I want the data from shop-&gt;collections-&gt;bags-&gt;items to show the specific product details.</p>
  <p><a href="https://i.stack.imgur.com/QF1xl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QF1xl.png" alt="data fetched" /></a></p>
  <p>And here is my code in product-details.component.jsx:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { connect } from &quot;react-redux&quot;;
  
  import { fetchCollectionsStart } from '../../redux/shop/shop.actions'
  
  
  const ProductDetailsPage = ({ fetchCollectionsStart, match, collections }) =&gt; {
  
      const {title, items} = collections;
  
      useEffect(() =&gt; {
          fetchCollectionsStart();
      }, [fetchCollectionsStart]);
  
      console.log(match);
  
      const ShowProduct = () =&gt; {
          return (
              &lt;div&gt;
                  {title}
              &lt;/div&gt;
          )
      }
  
      return (
          &lt;div className='product-details'&gt;
              &lt;div className=&quot;row&quot;&gt;
                  &lt;ShowProduct /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  
  };
  
  const mapDispatchToProps = dispatch =&gt; ({
      fetchCollectionsStart: () =&gt; dispatch(fetchCollectionsStart())
  });
  
  export default connect(null, mapDispatchToProps)(ProductDetailsPage);
  </code></pre>
  <p>The error pop up is shown as the image below:
  <a href="https://i.stack.imgur.com/3vPIl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3vPIl.png" alt="Error" /></a></p>
  <p>I don't know why I can't destructure the data from collections. I thought I already successfully fetched it into my application?
  Thanks a lot for helping me!!</p>