The parameter type ‘DocumentData’ cannot be assigned to type ‘never’ in this argument

I've been struggling to find a solution to my issue: Ts gives me an error:

 Argument of type 'DocumentData' is not assignable to parameter of type 'never'

I attempted the solution I found on this page: Argument of type 'DocumentData | undefined' is not assignable to parameter of type 'DocumentData'

but it doesn't seem to be working.

Here is my function:

async viewPost (post: { id?: unknown }) {
 const allCommentaires = await commentsCollection.where('postId', '==', post.id).get()
 if (allCommentaires) {
  allCommentaires.forEach(data => {
    const commentaires = data.data()
    commentaires.id = data.id
    if (commentaires !== undefined) {
      this.postComments.push(commentaires)
    }
  })
}
this.fullPost = post
this.showPostModal = true}

The error occurs at this line:

this.postComments.push(commentaires)

"commentaires" is underlined with the same error mentioned above.

Can anyone offer assistance?

typescriptfirebasevue.js

Answer №1

It's unusual that the solution you referenced didn't yield results in your case, but one potential approach could be to confirm the type using the as keyword.

Furthermore, consider relocating the data id assignment within the if statement to avoid encountering the runtime error 

Cannot set property 'id' of undefined
:

if (comments) {
  comments.id = data.id;
  this.commentPosts.push(comments as DocumentData);
}

Answer №2

After some research, I have found a solution to the issue. Below is the updated code:

 async viewPost ({ state, commit }, post: { id?: any }): Promise<void> {
  const postComments: firebase.firestore.DocumentData[] = []
  const allCommentaires = await commentsCollection.where('postId', '==', post.id).get()
  if (allCommentaires) {
    allCommentaires.forEach(data => {
      const commentaires = data.data()
      commentaires.id = data.id
      if (commentaires !== undefined) {
        postComments.push(commentaires)
      }
    })
  }
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experimenting with Typescript, conducting API call tests within Redux actions, mimicking classes with Enzyme, and using Jest

I am facing an issue where I need to mock a class called Api that is utilized within my redux actions. This class is responsible for making axios get and post requests which also need to be mocked. Despite following tutorials on how to mock axios and class ...

reactjstypescriptunit-testingreact-reduxjestjs

The data in the object bound to [ngmodel] does not update properly when changed within a method

Hello everyone, I am in need of some assistance with a puzzling issue. Currently, I am generating a set of inputs using JSON. When I make changes to the data in the web interface, everything works fine. The problem arises when I try to modify the value ...

angulartypescriptangular-materialangular-ngmodel

Checking a TypeScript project with various start points for linting

Within my extensive application that is constructed using webpack, there are numerous entry points that are generated dynamically. Each entry point requires specific target files to be created during the build process. I have already realized that when bu ...

typescript

Utilizing ES6 Promises in Mongoose with Typescript to Create a Seamless Chain

When attempting to chain ES6 promises with Mongoose 4.5.4, I encountered an error in Typescript. public static signup(req: express.Request, res: express.Response) { UserModel.findOne({ email: req.body.email }).exec() .then(existingUser => { ...

node.jsmongodbtypescriptmongoosees6-promise

How can I retrieve the locale for dateTimeLocalization in Vue i18n?

Currently, I am using a tutorial on implementing i18n in my vue code. It is working well with just one inconvenience - the language is hard-coded. Here is how my Localization file looks: export default: { 'fr-fr': { ... }, &ap ...

vue.jsvue-i18n

Unlocking the potential of deeply nested child objects

I have a recursively typed object that I want to retrieve the keys and any child keys of a specific type from. For example, I am looking to extract a union type consisting of: '/another' | '/parent' | '/child' Here is an il ...

typescript

Issues with unresponsive buttons in AngularJs

In creating a basic registration page, I encountered a strange issue with the button functionality. Whenever I attempt to submit the form, an error should be logged to the console. However, the buttons on the registration page appear to be inactive - it se ...

angularjstypescript

Order of execution for Angular 2 components

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; import {Router, ActivatedRoute, Params} from '@angular/router'; import { Country } from &ap ...

javascriptangulartypescript

Creating a dynamic union return type in Typescript based on input parameters

Here is a function that I've been working on: function findFirstValid(...values: any) { for (let value of values) { if (!!value) { return value; } } return undefined; } This function aims to retrieve the first ...

typescript

Customizing the initial search parameters in Vue InstantSearch: A step-by-step guide

I am utilizing the Vue components from Algolia to perform a search on my index. The search functionality is working correctly, but I am curious about setting the initial values for the refinement list upon page load. This is how I have set up the search: ...

javascriptvue.jsalgolia

Is there a way to execute v-for once the created() lifecycle hook has finished running?

In my current project, I am faced with the challenge of including avatars in notifications. Despite my efforts, I have not been able to solve this issue independently. The Vue.js template below demonstrates how I have attempted to add avatars to each notif ...

javascriptvue.jsaxioses6-promise

Unable to pass props to component data using Vue framework

I'm facing an issue with passing props in my component to the same component's data object. For some reason, I'm only receiving null values. Does anyone have any suggestions on how I should approach this problem? It seems like my Vue compone ...

javascripthtmlvue.jsvuejs2vue-component

The Quasar test fails to locate elements with a name tag>null<

I've encountered a strange issue while trying to conduct unit tests on my Quasar application. The problem seems to be that the test is unable to locate elements with the name tag, except for the q-route-tab components. I've experimented with diff ...

unit-testingvue.jsjestjsquasar

"Encountering issues with DefinePlugin when using the combination of Ionic, Angular, Webpack,

I'm trying to incorporate my process.env variable into the webpack Bundle using DefinePlugin. Here's the snippet of code in my webpack config: plugins: [ new webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env) ...

angulartypescriptnpmwebpackionic3

Ways to utilize a field from an interface as a type of index

interface Mapping { "alpha": (a: string) => void "beta": (b: number) => void } interface In<T extends keyof Mapping> { readonly type: T, method: Mapping[T] } const inHandlers: In<"alpha"> = { type ...

typescriptindexingtypes

Create a class with additional attributes to support different types of options

I define a set of options represented by strings: export type Category = 'people' | 'projects' | 'topics' | 'tools' An index is declared as follows: interface Entry { ... } type IPostEntryIndex = { [name in Cate ...

typescript

Validating input on the server using Quasar framework in Vueapplications

I am in search of a reusable solution for server-side input validation specifically tailored for the Quasar Framework. I am utilizing the q-input field and have identified 2 props that cater to error output, namely error and error-message. In case of a val ...

vue.jsvalidationasp.net-corequasar-frameworkquasar

What distinguishes between the methods of detecting falsy and truthy values?

While working with JavaScript / Typescript, I often find myself needing to verify if a length exists or if a value is true or false. So, the main query arises: are there any differences in performance or behavior when checking like this... const data = [ ...

javascriptangulartypescript

Ways to ensure that v-model does not become "true" or "false" in an input checkbox using Vue

I am currently working on a filter popup that includes a list of checkboxes. By default, some items should be selected and others not selected. I have connected these checkboxes to an object array using v-model. My issue is that when I deselect and select ...

javascripthtmlcssvue.jsfrontend

Issue with Vue 3: Composition API does not support Array of refs

Check out the code snippet below. <template> <div v-for="item in arr" :key="item">{{ item }}</div> </template> <script> import { ref } from "vue"; export default { name: "TestArr", ...

javascriptvue.jsvuejs3vue-composition-api