"query is not a function" Next Js getServerSideprops and firebase error

user_17466941 0
Viewed 249

I'm using NextJS and firebase as my primary database for the app that I'm currently building for an NGO. and I ran into an issue.

import {
  collection,
  where,
  query,
  getDocs
} from '@firebase/firestore';
import { db } from '../../../services/firebase';

export async function getServerSideProps({query}) {
  
  const user = await getDocs(query(collection(db, 'members'), where('id', '==', query)))
  return {
    props: {
      // VisionInfo: JSON.stringify(user.docs.map(item => item.data()))
      json: JSON.stringify('Hello')
    }
  };
}

The only way to get Query from the URL in NextJS in serverSideProps is to use the keyword "query" but the same keyword is used to fetch firebase document. The error shows "query is not a function" Is there anyway I could get Query into serversideprops ?

google-cloud-firestore firebase next.js javascript
1 Answers

The issue arises because you also have "query" in getServerSideProps parameters. Try naming the import from Firestore SDK (or the query param) as shown below:

import { query as fireQuery } from '@firebase/firestore';

export async function getServerSideProps({query}) {
  const user = await getDocs(fireQuery(collection(db, 'members'), where('id', '==', query)))
  // use fireQuery here      ^^^
})
user_131306970
Related