The following statement throws a type error. Why?

const x: Chat = { ...doc.data(), id: doc.id }

The error is:

Type '{ id: string; }' is missing the following properties from type 'Chat': message, name, createdAt ts(2739)

The spread operand provides three elements of the object, and the id is provided by the second operand.

I am using Vue 3.0.0, firebase 9.0.2 and typescript 4.1.5

here is the whole component:

import { ref } from 'vue'
import { projectFirestore, Timestamp } from '@/firebase/config'
// import Chat from '@/types/Chat'

interface Chat {
  id?: string
  message: string
  name: string | null
  createdAt: Timestamp
}

import {
  collection as collect,
  query,
  orderBy,
  onSnapshot,
} from 'firebase/firestore'

const getCollection = (collection: string) => {
  const documents = ref<Chat[]>()
  const error = ref<string>()
  try {
    const q = query(
      collect(projectFirestore, collection),
      orderBy('createdAt', 'desc')
    )
    const unsubscripe = onSnapshot(q, (querySnapshot) => {
      const results: Chat[] = []
      querySnapshot.forEach((doc) => {
        const x: Chat = { ...doc.data(), id: doc.id }
        doc.data().createdAT && results.push(x)
      })
      documents.value = results
    })
  } catch (err) {
    if (err instanceof Error) {
      error.value = err.message
    } else {
      throw Error('Unknown Error')
    }
  }
  return { documents, error }
}

export default getCollection

I am new to typescript, but this does seem strange. Thanks in advance

CodePudding user response：

As @TJCrowder commented, you can check what the data() method returns. It returns object of type DocumentData and Typescript doesn't really know what the contents are. You can try using a type assertion like this and specify that the object will be of type Chat:

const x = { ...doc.data(), id: doc.id } as Chat

You can read more about Type Assertion in Typescript's documentation.