title: Fetch and display lists of an user
body: <p>I have a profile page that displays the user info. The page shows the user name / email and a button to create a list.</p>
  <p><a href="https://i.stack.imgur.com/ennjn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ennjn.png" alt="enter image description here" /></a></p>
  <p>I can also edit the name and email correctly, and it reflects in the firebase instantaneously. Ok. I get the user data and I can edit it.</p>
  <p>What I'm trying to do now is to show the lists that the user has created.</p>
  <p>Look, this user has created one list, and what is returned to me is that he doesn't have lists.</p>
  <p><a href="https://i.stack.imgur.com/FuqP9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FuqP9.png" alt="enter image description here" /></a></p>
  <p>I'll try to shorten the code as much as possible:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
      imports.....
    import { db } from '../../firebase.config.js'
  
  
  let listings = []
  
  let auth = getAuth()
  
      // fetch the user's listings
    
      const fetchUserListings = async () =&gt; {
    
          const listingsRef = collection(db, 'listings')
  
          const q = query(
              listingsRef,
              where('userRef', '==', auth.currentUser.uid),
              orderBy('timestamp', 'desc')
          )
  
          const querySnap = await getDocs(q)
  
          querySnap.forEach((doc) =&gt; {
              return listings.push({
                  id: doc.id,
                  data: doc.data()
              })
          })
      }
  
      fetchUserListings()
    
  &lt;/script&gt;
  
          &lt;!-- display the user's listings --&gt;
      
  
  &lt;div&gt;
  
          {#if listings.length &gt; 0}
              &lt;p class="listingText"&gt;My lists&lt;/p&gt;
              {#each listings as listing}
                  &lt;ListingItem listing={listing.data} id={listing.id} /&gt;
              {/each}
          {:else}
              &lt;p class="noListings"&gt;You have no lists&lt;/p&gt;
          {/if}
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My ListItem component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
      export let listing
      export let id
      export let handleDelete
      import DeleteIcon from '../../static/assets/svg/deleteIcon.svg'
  &lt;/script&gt;
  
  &lt;li class="categoryListing"&gt;
      &lt;a href={`/category/${listing.type}/${id}`} class="categoryListingLink"&gt;
          &lt;img src={listing.imgUrls[0]} alt={listing.name} class="categoryListingImg" /&gt;
          &lt;div class="categoryListingDetails"&gt;
              &lt;p class="categoryListingLocation"&gt;
                  {listing.location}
              &lt;/p&gt;
              &lt;p class="CategoryListingName"&gt;
                  {listing.name}
              &lt;/p&gt;
              &lt;p class="categoryListingPrice"&gt;
                  ${listing.offer ? listing.discountedPrice : listing.regularPrice}
                  {listing.type === 'rent' ? '/ por mês' : ''}
              &lt;/p&gt;
              &lt;div class="categoryListingInfoDiv"&gt;
                  &lt;img src="/assets/svg/bedIcon.svg" alt="cama" /&gt;
                  &lt;p class="categoryListingInfoText"&gt;
                      {listing.bedrooms &gt; 1 ? `${listing.bedrooms} camas` : `${listing.bedrooms} cama`}
                  &lt;/p&gt;
                  &lt;img src="/assets/svg/bathtubIcon.svg" alt="banheiro" /&gt;
                  &lt;p class="categoryListingInfoText"&gt;
                      {listing.bathrooms &gt; 1
                          ? `${listing.bathrooms} banheiros`
                          : `${listing.bathrooms} banheiro`}
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      {#if handleDelete}
          &lt;DeleteIcon
              class="removeIcon"
              fill="rgb(231, 76, 60)"
              onClick={() =&gt; {
                  handleDelete(listing.id, listing.name)
              }}
          /&gt;
      {/if}
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Just when you think you've reached the simplest part, it's still tough.</p>
  <p><strong>Update:</strong></p>
  <p>I think that the problem is in firebase. The &quot;docs&quot; are empty:</p>
  <p><a href="https://i.stack.imgur.com/zE6Tp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zE6Tp.png" alt="enter image description here" /></a></p>
  <p>Now I am in serious trouble!</p>