How to define structure of docs with interface

Question

I have an interface describing the sctructure of my documents in a given collection:

interface IGameDoc {
    playerTurn: string;
    gameState: {
        rowOne: [string, string, string]
        rowTwo: [string, string, string]
        rowThree: [string, string, string]
    };
}

So if I fetch the docs in my collection

const gamesRef = useFirestore()
    .collection('Games')

const { status, data } = useFirestoreCollectionData(gamesRef) //I would like data to be of type IGameDoc[]

Can this be achieved somehow?

Answer 1

You can define data to be of whatever type you want like below however you can't control what type is returned from the useFirestoreCollectionData service (in this piece of code).

You either need to transform it using a function.

The example below will cast it to a type and it will try to match as best as it can. It is hard for me to test without knowing more of your code.

const { status, data } : { status: any, data: IGameDoc[]} = useFirestoreCollectionData(gamesRef)