title: Conversion to Firebase 9 from version 7 giving me FirebaseError: Expected type 'DocumentReference', but it was: a custom Query object
body: <p>I am trying to recreate a chat app clone with firebase version 9 from firebase version 7.
  I am trying to load the chat messages for the two users when the user navigates to the specific chat.</p>
  <p>I have tried everything but can't seem to solve the problem. The following is the old piece of code from firebase version 7</p>
  <pre><code>export async function getServerSideProps(context) {
    const ref = db.collection('chats').doc(context.query.id);
  
    // Prep the messages array for the chat
    const messagesRes = await ref
      .collection('messages')
      .orderBy('timestamp', 'asc')
      .get(); 
  
    const messages = messagesRes.docs.map((doc) =&gt; {
      return {
        ...doc.data(),
        id: doc.id,
      }
    }).map(messages =&gt; ({
      ...messages,
      timestamp: messages.timestamp.toDate().getTime(),
    }))
  
    // Prep the users array for the chat
    const chatRes = await ref.get();
    const chat = {
      ...chatRes.data(),
      id: chatRes.id,
    }
  
    return {
      props: {
        messages: JSON.stringify(messages),
        chat,
      }
    }
  }
  
  function ChatConversation({
    chat,
    messages
  }) {
    const [user] = useAuthState(auth);
  
    const endOfMessagesRef = useRef(null);
  
    const scrollToBottom = () =&gt; {
      endOfMessagesRef.current.scrollIntoView({
        behaviour: 'smooth',
        block: 'start',
      });
    };
  
    return (
      &lt;&gt;
        &lt;ChatScreen chat={chat} messages={messages} /&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>Here is the rewritten code in firebase version 9:</p>
  <pre><code>export async function getServerSideProps(context) {
    const ref = doc(db, &quot;chats&quot;, context.query.id);
  
    // Prep the messages array for the chat
  
    const messagesRef = collection(db, 'chats', context.query.id, 'messages');
  
    const messagesRes = await getDocs(query(messagesRef, orderBy(&quot;timestamp&quot;, &quot;asc&quot;)))
  
    const messages = messagesRes.docs.map((doc) =&gt; {
      return {
        ...doc.data(),
        id: doc.id,
      }
    }).map(messages =&gt; ({
      ...messages,
      timestamp: messages.timestamp.toDate().getTime(),
    }))
  
    // Prep the users array for the chat
    const chatRes = await getDocs(ref);
    const chat = {
      ...chatRes.data(),
      id: chatRes.id,
    }
  
    return {
      props: {
        messages: JSON.stringify(messages),
        chat,
      }
    }
  }
  
  function ChatConversation({
    chat,
    messages
  }) {
    const [user] = useAuthState(auth);
  
    return (
      &lt;&gt;
        &lt;ChatScreen chat={chat} messages={messages} /&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>What can I do to get rid of this error?</p>