【Vue × Firestore】ログインをする際にマイページに遷移したいです。

Question

#ログインをする際にマイページに遷移したいです。

新規登録（下記コード参照）する際にuidをfirestoreで取得してuidデータを格納しておりますが、
そのuidデータを元にログイン（下記コード参照)する際ログイン者のマイページに遷移させたいのですが、
下記usersというコレクションのuserCredential.user.uidを参照して、ページ遷移するように記述しみたのですが、
うまくログイン者のマイページに遷移されず、行き詰まっています。

pathは、「/mypage/ (ログイン者のuid)」という形にしたいです。

わかる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願い致します。

    signIn() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          this.$swal("ログインに成功しました。", {
            icon: "success",
          });
          this.uid = userCredential.user.uid;
          return firebase
            .firestore()
            .collection("users")
            .doc(userCredential.user.uid);
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたします。

#ログイン

  
<template>
  <div>
    <Header />
    <div class="signin flex">
      <div class="signin-inner flex">
        <h2>ログイン</h2>
        <input type="text" placeholder="Email" v-model="email" />
        <input type="password" placeholder="Password" v-model="password" />
        <button class="btn" @click.prevent="signIn">ログイン</button>
        <p>
          アカウントをお持ちでない方は
          <router-link to="/signup">こちらへ</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import Header from "@/components/header.vue";
import Vue from "vue";
import VueSwal from "vue-swal";
Vue.use(VueSwal);
export default {
  name: "Signin",
  data() {
    return {
      email: "",
      password: "",
    };
  },
  components: {
    Header,
  },
  methods: {
    signIn() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          this.$swal("ログインに成功しました。", {
            icon: "success",
          });
          this.uid = userCredential.user.uid;
          return firebase
            .firestore()
            .collection("users")
            .doc(userCredential.user.uid);
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })
        .catch(() => {
          this.$swal("ログイン情報が間違っています。", {
            icon: "error",
          });
        });
    },
  },
};
</script>

#router

Vue.use(VueRouter);

const routes = [
  {
    path: "/mypage/:uid",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
  },
];

#新規登録

<template>
  <div>
    <Header />
    <div class="signup flex">
      <div class="signup-inner flex">
        <h2>新規登録</h2>
        <input type="text" placeholder="Username" v-model="name" />
        <input type="text" placeholder="Email" v-model="email" />
        <input type="password" placeholder="Password" v-model="password" />
        <button class="btn-signup" @click.prevent="signUp">登録</button>
        <p>
          既に登録済みの方は
          <router-link to="/signin">こちらへ</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import Header from "@/components/header.vue";
import Vue from "vue";
import VueSwal from "vue-swal";
Vue.use(VueSwal);
export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: "",
      name: "",
      uid: "",
    };
  },
  components: {
    Header,
  },
  methods: {
    signUp() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((userCredential) => {
          this.$swal("登録に成功しました。", {
            icon: "success",
          });
          this.uid = userCredential.user.uid;
          return firebase
            .firestore()
            .collection("users")
            .doc(userCredential.user.uid)
            .set({
              name: this.name,
              time: firebase.firestore.FieldValue.serverTimestamp(),
              uid: userCredential.user.uid,
            });
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error",
          });
        });
    },
  },
};
</script>

Answer 1

          this.uid = res.user.uid;

          return (
            firebase
              .firestore()
              .collection("users")
              .doc(res.user.uid)
              .get()
          );
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })

こちらで解決できました。