How to get firestore reference type in typescript?

Question

I have the following code:

import { DocumentReference } from '@firebase/firestore-types'

export type Recipe = {
  author: string
  title: string
  ingredients: {
    quantity: number
    ingredient: DocumentReference["path"]
  }[]
  instructions: string[]
}

export const getAllRecipes = async() => {
  const snapshot = await db.collection('recipes').get()
  const data = snapshot.docs.map(doc => doc.data())
  return data
}



const recipes: Recipe[]  = await getAllRecipes()

I for some reason can't seem to get the type right for the ingredients. The error I got is:

Error: Error serializing .recipes[0].ingredients[0].ingredient returned from getStaticProps in "/".

What is the way to define the type on array of references from firestore in typescript?

Also, if I do (just for debugging)

export const getAllRecipes = async() => {
  const snapshot = await db.collection('recipes').get()
  const data = snapshot.docs.map(doc => {
    const docData = doc.data()
    const {ingredients} = docData
    ingredients.map((ingredient: DocumentReference) => {
      const jsonIngredient = ingredient.path
      console.log(jsonIngredient) 
    })
    return docData
  })
  return data
}

Why do I get path is undefined?

What line of code generates that error? I don't see any code that serializes anything at all. I also don't see where you are using the Recipes type. I suggest editing the question to add all of the relevant code, as well as explain what you expect the code to do instead of generate this error. — Doug Stevenson
– Doug Stevenson, Commented Sep 6, 2020 at 0:46
@DougStevenson Added more code. However, can just be a simple call which define type, don't need to write it out, given there is a call function already. For example const recipes: Recipes[] = await getAllRecipes() — utopia
– utopia, Commented Sep 6, 2020 at 0:52
This is all the code you're running? I still don't see any serialization. What line of code causes the error? — Doug Stevenson
– Doug Stevenson, Commented Sep 6, 2020 at 0:59
@DougStevenson the last line, note that the tag is including Nextjs, so error coming from the call await getAllRecipes() and serialised from getStaticProps. I updated the full error msg — utopia
– utopia, Commented Sep 6, 2020 at 1:01
What do your documents look like? That would be the actual data, right? — Doug Stevenson
– Doug Stevenson, Commented Sep 6, 2020 at 1:04

Doug Stevenson · Accepted Answer · 2020-09-06 01:16:37Z

1

I strongly suspect that the default toJSON serialization of a DocumentReference object (which is a complex object with references to other Firestore objects) just isn't going to work the way you want. If you want the caller to have a DocumentReference, you're going to have to convert each one into a string path using its path property, then rebuild the path into a reference using Firestore.doc(path). The TypeScript type doesn't matter at all - it is simply a layer of understanding around core set of objects.

answered Sep 6, 2020 at 1:16

Doug Stevenson

321k37 gold badges458 silver badges474 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

utopia Over a year ago

How can I get the path? As I put the above code, I didnt get the paths, they are for some reason undefined?

Doug Stevenson Over a year ago

As I linked in my answer, if you have a DocumentReference object, you can use its path propery. I can't explain why you have an undefined value somewhere. That wouldn't event serialize at all. You'll have to dig into the document snapshot and get to the actual reference objects somehow.

Collectives™ on Stack Overflow

How to get firestore reference type in typescript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related