CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestorenext.js
Ahnaaf Al Rafee
Ahnaaf Al Rafee

Reputation: 423

Why is this error Function Query.where() called with invalid data. Unsupported field value: undefined happening in firebase?

I'm trying to get a specific doc from my firestore database. So I matched the slug field in the doc. But it throws me an error...

Function Query.where() called with invalid data. Unsupported field value: undefined

My syntax looks like this

export async function getStaticProps(context) {
  const { slug } = context.params;

  const res = await firebase
    .firestore()
    .collection("books")
    .where("slug", "==", slug)
    .get();

  const book = res.docs.map((book) => book.data());

  if (book.length) {
    return {
      props: {
        book: book[0],
      },
    };
  } else {
    return {
      props: {},
    };
  }
}

and my firestore document looks like

enter image description here

BTW I'm using Next.Js's SSG.

Upvotes: 2

Views: 6305

Answers (2)

Daquiver
Daquiver

Reputation: 1

Check the page before getStaticProps to see if it's actually receiving the data. I had this same issue, and the error was the previous page wasn't passing the data

Upvotes: 0

Ahnaaf Al Rafee
Ahnaaf Al Rafee

Reputation: 423

It is because in the getStaticPaths slug is not returned. You've to return the same name(here slug) in params to get in the URL params(context.params).

params: { slug: book.data().slug }

Upvotes: 1

Related Questions