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

9lowa7mx 于 2023-10-22 发布在 React

关注(0)|答案(1)|浏览(99)

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

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而不会出现此错误？特别是如果我的对象不需要转换？

firebase

来源：https://stackoverflow.com/questions/77003045/how-to-use-usedocumentdata-from-react-firebase-hook-with-typed-data

1条答案

按热度按时间

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

赞(0）回复(0）举报 2023-10-22

我来回答

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

1条答案

相关问题

热门标签

最新问答