Using a custom JavaScript object yields error with Firestore document: "Function DocumentReference.set() called with invalid data"

Question

It's my first project, please can you ask me who is a problems.

So, in first I have this function that add data on firebase:

  addpost() {
    let newposts = new Posts(
      this.addForm.value
    )   
    this.postsservice.addPosts(newposts);
  }

In second: service.ts

  addPosts(posts: Posts){
        console.log(posts)
        this.postsCollection.add(posts);
    }

Model.ts

export class Posts {
    id?: string;
    title?: string;
    description?: string;
    upload?: string;

    constructor(obj: any) {
        this.title = obj && obj.title
        this.description = obj && obj.description,
        this.upload = obj && obj.upload
    }
    }

My Cloud Firestore

When I add data show this error:

core.js:4352 ERROR FirebaseError: Function DocumentReference.set() called with invalid data. Data must be an object, but it was: a custom object (found in document posts/OLYLatFTZFr0zVuM3Q4S) at new n (http://localhost:4200/vendor.js:151375:23) at Fs (http://localhost:4200/vendor.js:165124:16) at t.s_ (http://localhost:4200/vendor.js:164842:16) at Us (http://localhost:4200/vendor.js:165077:37) at ks (http://localhost:4200/vendor.js:164882:5) at n.set (http://localhost:4200/vendor.js:166427:40) at n.add (http://localhost:4200/vendor.js:166941:59) at AngularFirestoreCollection.add (http://localhost:4200/vendor.js:33999:25) at PostsService.addPosts (http://localhost:4200/main.js:498:30) at PostsComponent.addpost (http://localhost:4200/main.js:1014:27) defaultErrorLogger @ core.js:4352 handleError @ core.js:4400 handleError @ core.js:8765 executeListenerWithErrorHandling @ core.js:15217 wrapListenerIn_markDirtyAndPreventDefault @ core.js:15249 schedulerFn @ core.js:24872 __tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122 _next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.js:24841 onSubmit @ forms.js:5552 FormGroupDirective_submit_HostBindingHandler @ forms.js:5605 executeListenerWithErrorHandling @ core.js:15214 wrapListenerIn_markDirtyAndPreventDefault @ core.js:15249 (anonymous) @ platform-browser.js:582 invokeTask @ zone-evergreen.js:399 onInvokeTask @ core.js:27474 invokeTask @ zone-evergreen.js:398 runTask @ zone-evergreen.js:167 invokeTask @ zone-evergreen.js:480 invokeTask @ zone-evergreen.js:1621 globalZoneAwareCallback @ zone-evergreen.js:1647

What does your console log show? Is it logging what you expect? We can't see what .addForm.value is, so we don't really, know what exactly you're passing to Firestore. — Doug Stevenson
newpost Posts {title: "tttt", description: "ddddd", upload: "uuuu"} — A.B

Doug Stevenson Doug Stevenson · Accepted Answer · 2020-11-06T22:17:16

As the error message says, Firestore doesn't accept custom objects. You should provide a plain JavaScript object. You should generate something that's equivalent to this in the end:

this.postsCollection.add({
  title: "tttt",
  description: "ddddd",
  upload: "uuuu"
});

It might be worthwhile to use an interface to describe this object rather than defining a class that you have to create with new.

Using a custom JavaScript object yields error with Firestore document: "Function DocumentReference.set() called with invalid data"

1 Answers