firebase - TypeScript אינו מודע לסוג של אובייקט מנותץ

אני עושה קריאה בסיסית ל-Firebase כדי לשלוף אוסף כך

import { getFirestore, collection, getDocs } from "firebase/firestore";

import { Invoice } from "../models/Invoice";

const db = getFirestore();

export const getInvoicesCollection = async () => {
  try {
    const snapshot = await getDocs(collection(db, "invoices"));

    const docs: Invoice[] = snapshot.docs.map((doc) => ({
      ...doc.data(),
    }));

    console.log(docs);
  } catch (error) {
    console.error(error);
  }
};

export default getInvoicesCollection;

אובייקט התגובה שמוחזר על ידי Firebase די כבד, לכן אני ממפה הכל שאני צריך לאובייקט חדש בחלק הזה:

const docs: Invoice[] = snapshot.docs.map((doc) => ({
  ...doc.data(),
}));

console.log(docs);

ואני מקבל את התוצאה בדפדפן:

אבל TypeScript מתלונן ש:

Type '{ [x: string]: any; }[]' is not assignable to type 'Invoice[]'.
Type '{ [x: string]: any; }' is missing the following properties from type 'Invoice': id, createdAt, paymentDue, description, and 8 more.

אם אני מבין נכון, זה אומר שהמשתנה שלי הוא מערך של אובייקטים עם מאפיין יחיד שהוא מחרוזת ויכול להיות כל דבר? איך אני יכול לגרום לו להיות מודע למה שהאובייקט באמת נראה כמו?

תשובה #1

הסוג ש-doc.data() מחזיר הוא { [x: string]: any; }, כלומר אובייקט עם מספר כלשהו של תכונות כאשר המפתח הוא מחרוזת, וכל אחת מהן יכולה להכיל כל ערך. אין דרך ל-TypeScript להבין סוג מדויק יותר מכך, מכיוון שהמסד נתונים יכול להחזיר כמעט כל דבר.

אז מכיוון ש-TypeScript לא מסוגלת לקבוע את הסוג, תצטרך לציין מהו הסוג:

const docs: Invoice[] = snapshot.docs.map((doc) => ({
  ...doc.data() as Invoice,
}));

הערה: על ידי שימוש באימות סוג, אתה אומר ל-Typescript לא לבדוק את העבודה שלך, ולסמוך עליך בלבד. אם תעשה טעות והמסד נתונים למעשה מכיל סוגים שונים של אובייקטים, Typescript לא יוכל להודיע לך על כך.