Error - firestore is not defined (Only after "then")

Question

I have a problem : When I want to create fake users in my database, everything work like a charm until I start the loop 'for'.

At this point, I have this error :

Error adding document: TypeError: Cannot read property 'firestore' of undefined

I've try multiple things but nothing work ... Do you have an idea ?

Thank you all !

create_NewUser(data:any){
        this.firestore.collection('Users-test').add({
          name:data.name,
          town:data.town,
          gender:data.gender,
          email:data.email,
          picture:data.picture,
          birthdate:data.birthdate
        })
        .then(function(docRef) {
          // console.log("Document written with ID: ", docRef.id);
          let nbInterest:any = data.interests.length;
          // let nbAvailaibilities:any = data.interests.length;
          for (let index = 0; index < nbInterest; index++) {
            this.firestore.collection('Users-test').doc("/" + docRef.id + "/interests/" + index).add({
              interest:data.interests[index]
            }) 
          }
        })
        .catch(function(error) {
            console.error("Error adding document: ", error);
        });
      }

score 2 · Answer 1 · answered Aug 26 '19 at 20:24

Taken from here:

In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions however, this is lexically bound. It means that it usesthis from the code that contains the arrow function.

This means: in the function that you pass as an argument to then this is not defined.

Arrow function

You can use an arrow-function that binds to the "surrounding" this.

.then((docRef) => {
    // process this here
})

Bind `this` to the function

You can explicitly bind an object to a function that is treated as this within the function

.then(function(docRef) {
     // process this here
}.bind(this))

score 1 · Accepted Answer · answered Aug 26 '19 at 20:24

Do this:

In your create_NewUser:

const that = this;

Inside for loop use

that.firestore
.collection('Users-test').doc("/" + docRef.id + "/interests/" + index).add({
......
});

This is because this in not in the scope of then and is not referable.

Complete:

create_NewUser(data:any){
        const that = this;
        this.firestore.collection('Users-test').add({
          name:data.name,
          town:data.town,
          gender:data.gender,
          email:data.email,
          picture:data.picture,
          birthdate:data.birthdate
        })
        .then(function(docRef) {
          // console.log("Document written with ID: ", docRef.id);
          let nbInterest:any = data.interests.length;
          // let nbAvailaibilities:any = data.interests.length;
          for (let index = 0; index < nbInterest; index++) {
            that.firestore.collection('Users-test').doc("/" + docRef.id + "/interests/" + index).add({
              interest:data.interests[index]
            }) 
          }
        })
        .catch(function(error) {
            console.error("Error adding document: ", error);
        });
      }

Binding is also a way suggested by scorpioo590

Good Answer ! Thank you ! – PalmThreeStudio Aug 27 '19 at 13:06 — PalmThreeStudio, Aug 27 '19 at 13:06

Error - firestore is not defined (Only after "then")

2 Answers2

Arrow function

Bind this to the function

Bind `this` to the function