I have implemented the useFirestore() wrapper from VueUse.org and am encountering an issue while typing the user ref it returns as User. Here is my code:
import { User } from 'src/types';
const userId = useUserStore().user.id;
const userDocRef = doc(db, 'users', userId);
const user = useFirestore<User>(userDocRef); // <-- Error shows here
This is what my User interface looks like:
export interface User {
id: string;
userType?: UserType;
createdAt?: Timestamp;
email?: string;
displayName?: string;
firstName?: string;
lastName?: string;
initials?: string;
passwordUpdatedAt?: Timestamp;
photoUrl?: string;
phoneE164Format?: string;
phoneNationalFormat?: string;
stripeId?: string;
stripeLink?: string;
googleTokens?: {
access_token: string;
expiry_date: number;
id_token: string;
refresh_token: string;
token_type: string;
};
}
Although I now have intellisense with User properties for the user variable, I am getting an error on userDocRef:
No overload matches this call. Overload 1 of 4, '(maybeDocRef: MaybeRef<DocumentReference>, initialValue?: User | undefined, options?: UseFirestoreOptions | undefined): Ref<...>', gave the following error. Overload 2 of 4, '(maybeDocRef: MaybeRef<Query>, initialValue?: User[] | undefined, options?: UseFirestoreOptions | undefined): Ref<...>', gave the following error.ts(2769)
I have checked the "Type Declarations" section at the bottom of the useFirestore() documentation which might provide some insight. However, I am struggling to fully understand it.
I believe I am passing User correctly as a generic, so I am unsure why this error is occurring. Can someone please explain why this error is happening and how to resolve it?