在我的VueJS + VueX + Firebase项目中需要帮助

Question

我试图显示当前的userName和title，它们已经通过登录创建，并且现在存储在Firebase Cloud Firestore数据库中。

但是我不知道该如何处理，我自己找不到代码中的错误。

代码如下：

<template>
<div id="dashboard">
    <section>
        <div class="col1">
            <div class="profile">
                <h5>{{ userProfile.name }}</h5>
                <p>{{ userProfile.title }}</p>
                <div class="create-post">
                    <p>create a post</p>
                    <form @submit.prevent>
                        <textarea v-model.trim="post.content"></textarea>
                        <button @click="createPost" 
         class="button">post</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col2">
            <div>
                <p class="no-results">There are currently no posts</p>
            </div>
        </div>
       </section>
   </div>
 </template>

 <script>
    const fb = require('../firebaseConfig.js')
    import { mapState } from 'vuex'
    import firebase from 'firebase'
    const db = firebase.firestore()

    export default {
     data() {
       return {
         post: {
            content: ''
         }
       }
     },
     computed: {
        ...mapState(['userProfile'])
     },
     methods: {
       createPost() {
         fb.postsCollection.add({
            createdOn: new Date(),
            content: this.post.content,
            userId: this.currentUser.uid,
            userName: this.userProfile.name,
            comments: 0,
            likes: 0
        }).then(ref => {
            this.post.content = ''
        }).catch(err => {
            console.log(err)
        })
    }
   }
  }
 </script>

Store.js

  import Vue from 'vue'
  import Vuex from 'vuex'
  const fb = require('./firebaseConfig.js')

  Vue.use(Vuex)

  // handle page reload
  fb.auth.onAuthStateChanged(user => {
  if (user) {
    store.commit('setCurrentUser', user)
    store.dispatch('fetchUserProfile')
   }
  })

  export const store = new Vuex.Store({
   state: {
     currentUser: null,
     userProfile: {}
   },
   actions: {
    clearData ({ commit }) {
      commit('setCurrentUser', null)
      commit('setUserProfile', {})
    },
    fetchUserProfile ({
      commit,
      state
    }) {
    fb.usersCollection.doc(state.currentUser.uid).get().then(res => {
      commit('setUserProfile', state.res.data())
    }).catch(err => {
      console.log(err)
    })
      console.log(state)
    }
   },
   mutations: {
     setCurrentUser (state, val) {
       state.currentUser = val
    },
    setUserProfile (state, val) {
      state.userProfile = val
    }
   }
})

错误输出：

userProfile输出为对象：