如何从React Firebase Hook中使用类型化数据的useDocumentData?

9lowa7mx  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(98)

我正在尝试使用react fire hook libraryuseDocumentData
我有点纠结于如何检索转换后的数据。
到目前为止,我有这个:

export const useProfile = () => {
  const [user] = useAuthState(auth);
  const docRef = doc(db, "profiles", user!.uid);
  useDocumentData<UserProfile>(docRef, {
    snapshotListenOptions: {
      includeMetadataChanges: true,
    },
  });
};
export interface UserProfile {
  propOne: string;
  propTwo: string;
}

我的问题是,它在useDocumentData的第一个参数上说:

Argument of type 'DocumentReference<DocumentData, DocumentData>' is not assignable to parameter of type 'DocumentReference<UserProfile, DocumentData>'.
  Types of property 'converter' are incompatible.
    Type 'FirestoreDataConverter<DocumentData, DocumentData> | null' is not assignable to type 'FirestoreDataConverter<UserProfile, DocumentData> | null'.
      Type 'FirestoreDataConverter<DocumentData, DocumentData>' is not assignable to type 'FirestoreDataConverter<UserProfile, DocumentData>'.
        The types returned by 'fromFirestore(...)' are incompatible between these types.
          Type 'DocumentData' is not assignable to type 'UserProfile'.ts(2345)

我完全意识到,如果需要,我可以制作一个转换器来转换数据,但在我的情况下,不需要转换,我只有直接Map到我的配置文件的字段,所以据我所知,它不应该是必需的。
如何调用useDocumentData而不会出现此错误?特别是如果我的对象不需要转换?

wbgh16ku

wbgh16ku1#

因为docRef的类型是DocumentReference<DocumentData>,所以不可能将其传递给useDocumentData<UserProfile>,因为第一个参数的类型是DocumentReference<UserProfile>
所以你需要做的就是将docRef转换为DocumentReference<UserProfile>

1.类型铸造

const docRef = doc(db, "profiles", user!.uid) as DocumentReference<UserProfile>;

因为你的界面很简单,所以出错的可能性很小,但有时候更安全一些。

2. FirestoreDataConverter

您可以创建自定义对象,从firebase转换为您自己的数据和反向。

const converter = {
  toFirestore(doc: UserProfile): DocumentData {
    return doc;
  },
  fromFirestore(snapshot: QueryDocumentSnapshot): UserProfile {
    return snapshot.data() as UserProfile;
  }
};

// ...

const docRef = doc(db, "profiles", user!.uid).withConverter(converter);

这样,你就可以自定义firebase转换数据的方式。
有关更多信息,请查看此URL:https://firebase.google.com/docs/reference/js/firestore_.firestoredataconverter

相关问题