Nuxt.jsビギナーズガイドで発生した、Cannot read property 'id' of nullエラーについて

Question

前提・実現したいこと

Nuxt.jsビギナーズガイドのnuxt-blog-serviceを作成中で、
ユーザー機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

TypeError: Cannot read property 'id' of null

該当のソースコード

<template>
  <div>
    <el-row v-if="user">
      <el-col :span="6">
        <el-card class="text-center" style="margin-right: 16px;">
          <div>
            <img
             src="https://placehold.it/150x150"
             style="width: 100%;margin-bottom: 16px;border-radius: 2px;"
             alt=""
             />
          </div>
          <h2>
          </h2>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <div slot="header" class="clearfix">
            <span>{{user.id}} さんの投稿</span>
          </div>
          <el-table
            :data="userPosts"
            style="width: 100%"
            class="table"
          >
            <el-table-column
              prop="title"
              label="タイトル"
            />
            <el-table-column
              prop="created_at"
              label="投稿日時"
              width="160"
            />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from '~/plugins/moment'
import { mapGetters } from 'vuex'

export default {
  async asyncData({ store, route, error }){
    const { id } = route.params
    try {
      await store.dispatch('users/fetchUser', { id })
    } catch(e) {
      error({ statusCode: 404 })
    }
  },
  computed: {
    userPosts(){
      return Object.entries(this.user.posts).map(([id, post]) => {
        post.created_at = moment(post.created_at).format('YYYY/MM/DD HH:mm:ss')
        return { id, ...post }
      })
    },
    user(){
      const user = this.users.find(u => u.id === this.$route.params.id)
      if (!user) return null
      return Object.assign({ posts: [] }, user)
    },
    ...mapGetters('users', ['users'])
  }
}
</script>

該当のソースコード

import moment from '~/plugins/moment'

export const state = () => ({
  isLoggedIn: false,
  user: null
})

export const getters = {
  isLoggedIn: state => state.isLoggedIn,
  user: state =>
    (state.user ? Object.assign({ likes: [] }, state.user) :null)
}

export const mutations = {
  setUser(state, { user }) {
    if (user.id.match(/_|@|./)) {
      throw new TypeError('invalid username')
    }
    state.user = user
    state.isLoggedIn = true
  },
  updateUser(state, { user }) {
    state.user = user
  }
}

export const actions = {
  async login({ commit }, { id }) {
    if (id.match(/_|@|./)) {
      throw new TypeError('invalid username')
    }
    const user = await this.$axios.$get(`/users/${id}.json`)
    console.log(user)
    if (!user.id) throw new Error('Invalid user')
    commit('setUser', { user })
  },
  async register({ commit }, { id }) {
    const payload = {}
    payload[id] = { id }
    await this.$axios.$patch(`/users.json`, payload)
    const user = await this.$axios.$get(`/users/${id}.json`)
    if (!user.id) throw new Error('Invalid user')
    commit('setUser', { user })
  },
  async addLikeLogToUser({ commit }, { user, post }) {
    user.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  },
  async removeLikeLogToUser({ commit }, { user, post }) {
    user.likes = post.likes.filter(like => like.user_id !== user.id) || []
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  }
}

###該当のソースコード

import moment from '~/plugins/moment'

export const state = () => ({
  posts: []
})

export const getters = {
  posts: state =>
    state.posts.map(post => Object.assign({ likes: [] }, post))
}

export const mutations = {
  addPost(state, { post }) {
    state.posts.push(post)
  },
  updatePost(state, { post }) {
    state.posts = state.posts.map((p) => (p.id === post.id ? post: p))
  },
  clearPosts(state) {
    state.posts = []
  }
}

export const actions = {
  async fetchPost({ commit }, { id }) {
    const post = await this.$axios.$get(`/posts/${id}.json`)
    commit('addPost', { post: { ...post, id } })
  },
  async fetchPosts({ commit }) {
    const posts = await this.$axios.$get(`/posts.json`)
    commit('clearPosts')
    Object.entries(posts || [])
      .reverse()
      .forEach(([id, content]) =>
        commit('addPost', {
          post: {
            id,
            ...content
          }
        })
      )
  },
  async publishPost({ commit }, { payload }) {
    const user = await this.$axios.$get(`/users/${payload.user.id}.json`)
    const created_at = moment().format()
    payload = {
      created_at,
      ...payload
    }
    const post_id = (await this.$axios.$get('/posts.json', payload)).name
    const post = { id: post_id, ...payload, created_at }
    const putData = { id: post_id, ...payload, created_at }
    delete putData.user
    await this.$axios.$put(`/users/${user.id}/posts.json`, [
      ...(user.posts || []),
      putData
    ])
    commit('addPost', { post })
  },
  async addLikeToPost({ commit }, { user, post }) {
    post.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
    const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post)
    commit('updatePost', { post: newPost })
  },
  async removeLikeToPost({ commit }, { user, post }) {
    post.likes = post.likes.filter(like => like.user_id !== user.id) || []
    const newPost = await this.$axios.$get(`/posts/${post.id}.json`, post)
    commit('updatePost', { post: newPost })
  }
}

###該当のソースコード

export const state = () => ({
  users: []
})

export const getters = {
  users: state => state.users
}

export const mutations = {
  addUser(state, { user }) {
    state.users.push(user)
  },
  addUserPost(state, { user, post }) {
    state.userPosts[user.id].push(post)
  },
  clearUserPosts(state, { user }) {
    state.userPosts[user.id] = []
  }
}

export const actions = {
  async fetchUser({ commit }, { id }) {
    const user = await this.$axios.$get(`/users/${id}.json`)
    commit('addUser', { user })
  },
  async addLikeLogToUser({ commit }, { user, post }) {
    post.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
    const newPost = await this.$axios.$get(`/posts/${post.id}.json`, post)
    commit('updatePost', { post: newPost })
  },
  async removeLikeLogToUser({ commit }, { user, post }) {
    post.likes = post.likes.filter(like => like.user_id !== user.id) || []
    const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post)
    commit('updatePost', { post: newPost })
  }
}

試したこと

yarn run lint --fix等のツールでエラー解析したが、原因を見つけることができませんでした。

補足情報（FW/ツールのバージョンなど）

Comments

[y_waiwai]

先の質問となにか変わってるんでしょうか

[ryuii]

Storeは正しく実装されていますか？usersとpostsあたりのidがうまく作られていないようです。

[toshihirokato]

ご指摘いただきありがとうございます！
storeディレクトリ内のプロジェクトを追記させていただきましたので、お手隙の際に見ていただけると幸いです。
よろしくお願いいたします。

Answer 1

app/store/index.jsやusers.js内の(/users/${id}.json)が(/users/#{id}.json)となっていましたので、(/users/${id}.json)に書き直したところ、上記のエラーを解決することができました。

Answer 2

以下URLに該当の書籍のソースコードがあるようですので、こちらを参照したほうが解決が早そうです。
GitHub: nuxt-beginners-guide

エラーメッセージがどこで発生しているかというところがわかると原因がわかりやすいです。

例えば、ログイン画面でログインするときにFirebaseのデータベースにユーザーが存在しないときに、
質問者様と同じエラーが発生します。
その場合は、try ~ catch文のcatchにエラーが発生した場合の処理を書いて、エラー内容をポップアップ表示したり、処理が止まったりすることを未然に防いでいます。

あと、users.jsのactionsの
axiosの参照(get)・登録(post)・更新(put)の部分が異なるようです。

Comments

[toshihirokato]

ご回答いただきありがとうございます！
users.jsファイル内のactionsのaxiosのget, post, putを書籍のソースコードと全く同じにしたのですが、それでも同じエラー文が表示され、解決できないかったので、ryuii様の仰る通りにtry-catch構文を加えてエラー箇所を絞りたいと思います。