weird bug with navParams

I am having some weird issues with NavParams on my ionic project. I am able to pass it from the first page to second page, but when trying to pass it from second page to third page it is undefined.

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseService } from './../../providers/firebase-service/firebase-service';
import { Post } from '../../models/post/post.model';
import { Observable } from 'rxjs/Observable';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireObject } from 'angularfire2/database/interfaces';
import { User } from '../../models/user/user.model';
import firebase from 'firebase';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  userData: AngularFireObject<User>;
  posts$: Observable<Post[]>;
  checkRole: boolean = true;

  constructor(public navCtrl: NavController, private firebaseService: FirebaseService, private afAuth: AngularFireAuth) {
    this.posts$ = this.firebaseService
      .getPosts() // DB LIST
      .snapshotChanges() // Key and Value
      .map(changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      });
  }

  viewPost(post: Post) {
    this.navCtrl.setRoot('PostPage', { post: post });
  }

}

post.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Post } from '../../models/post/post.model';

@IonicPage()
@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
})
export class PostPage {
  post: Post;

  constructor(public navCtrl: NavController, public navParams: NavParams, private afAuth: AngularFireAuth) {
    this.post = this.navParams.get('post');
  }

  ionViewDidLoad() {
    console.log(this.post);
  }

  editPost(post: Post) {
    this.navCtrl.push('EditPostPage', { post: post });
  }
}

All good here on page2, Console log is showing all the correct information.

edit-post.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Post } from '../../models/post/post.model';
import { FirebaseService } from '../../providers/firebase-service/firebase-service';

@IonicPage()
@Component({
  selector: 'page-edit-post',
  templateUrl: 'edit-post.html',
})
export class EditPostPage {
  post: Post;

  constructor(public navCtrl: NavController, public navParams: NavParams, private firebaseService: FirebaseService) {
    this.post = this.navParams.get("post");
  }

  ionViewDidLoad() {
    console.log(this.post);
  }

  savePost(post: Post) {
    this.firebaseService.editPost(post).then(() => {
      this.navCtrl.pop();
    });
  }
}

This is where it gets weird. I am getting undefined on this.item at page3

• node v.8.94
• cordova@8.0.0
• ionic@3.19.1

Is this a bug? Please help.

Solved with

 editPost(post: Post) {
      this.navCtrl.push('EditPostPage', { post: this.post });
 }