title: Firebase auth, get uid before page loads instead of "null"
body: <p>I'm trying to query my firestore and I need the uid for the query. My issue is that when my page loads and I run the query, I get <code>TypeError: Cannot read properties of null (reading 'uid')</code>.  The uid isn't retrieved by the time the page loads. When I reload localhost from my terminal, the query runs just fine and my desired info is shown, since the auth has loaded.</p>
  <p>In an attempt to solve this, I've placed my query and data retrieval inside a useEffect()</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
          const getStories = async () =&gt; {
                  const q  = query(storiesCollectionRef, where(&quot;authorId&quot;, &quot;==&quot;, auth.currentUser.uid))
                  const data = await getDocs(q);
                  setStoryList(data.docs.map((doc) =&gt; ({...doc.data(), id: doc.id})));
          };
          getStories();
      }, [auth]);
  </code></pre>
  <p>I know that giving a useEffect() dependencies will cause it to reload when these dependencies update. I've tried leaving it empty <code>[]</code>, putting <code>[auth]</code>, and putting <code>[auth.currentUser]</code> as dependecies as per <a href="https://stackoverflow.com/questions/66752231/firebase-reactjs-useeffect-typeerror-cannot-read-property-uid-of-null">this</a> post, but nothing has worked.</p>
  <p>I need to get the uid before my page loads so that the correct information is displayed to the user. I'd appreciate any help!</p>
  <p><strong>Edit:</strong>
  Since I couldn't get it working, my temporary solution is to implement my query logic in my map. I would still really appreciate any insight on how to resolve this properly, as getting all the documents and then refining based on uid seems improper.</p>
  <pre class="lang-js prettyprint-override"><code> useEffect(() =&gt; {
          const getStories = async () =&gt; {
                  //const q  = query(storiesCollectionRef, where(&quot;authorId&quot;, &quot;==&quot;, auth.currentUser.uid))
                  const data = await getDocs(storiesCollectionRef);
                  setStoryList(data.docs.map((doc) =&gt; ({...doc.data(), id: doc.id})));
          };
          getStories();
      }, []);
  
  return(
  {storyList.map(story =&gt; {
                          return auth.currentUser.uid === story.authorId ?
                              &lt;Storybook title={story.title}/&gt;
                              :
                              &lt;&gt;&lt;/&gt;
                      })}
  )
  </code></pre>
  <p>It takes a second for the information to render properly but at least there's no error.</p>