[Vue.js] Cannot read property 'id' of undefined"を解消できません[Nuxt.js]

Nuxt.js初学者で技術書を参考にしながらアプリを作っています。

タイトルにある通り

 Cannot read property 'id' of undefined"

というエラーが出てしまいアプリをブラウザで表示できないという状況に陥っています。

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

上記以外にもコマンドの方に

 [Vue warn]: Property or method "formData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <TheHeader> at app/components/TheHeader.vue
       <App/layouts/default.vue> at app/layouts/default.vue
         <Root>

というエラーメッセージと

 [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"                      11:54:19

found in

---> <TheHeader> at app/components/TheHeader.vue
       <App/layouts/default.vue> at app/layouts/default.vue
         <Root>

というエラーメッセージが出ています。

また、Chromeの検証機能を使ってみたところ

Failed to load resource: the server responded with a status of 500 (RuntimeError)

というサーバー側のエラーが出ていました。

該当のソースコード

**app/store/index.js**

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 })
  }
}

**app/store/user.js**

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.$put(`/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 })
    }
  }

**app/store/users.js**

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.$put(`/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 })
  }
}

**app/pages/posts/_id.vue**

<template>
  <section class="container posts-page">
    <div style="flex: 1">
      <el-card v-if="post">
        <!---v-if--->
        <div slot="header" class="clearfix">
          <h2>
            {{post.title}}
          </h2>
          <small>by {{post.user.id}}</small>
        </div>
        <p>
          {{post.body}}
        </p>
        <p class="text-right">
          <el-button :disabled="!isLoggedIn" type="warning" v-if="isLiked" @click="unlike" round>
            <!---v-if--->
            <span class="el-icon-star-on" />
            <span>{{post.likes.length}}</span>
          </el-button>
          <el-button :disabled="!isLoggedIn" type="warning" v-else @click="like" round>
            <span class="el-icon-star-off" />
            <span>{{post.likes.length}}</span>
          </el-button>
        </p>
        <p class="text-right">
          {{post.created_at | time}}
        </p>
      </el-card>
      <p>
        <nuxt-link to="/posts">
          &lt; 投稿一覧へ戻る
        </nuxt-link>
      </p>
    </div>
  </section>
</template>

<script>
import moment from '~/plugins/moment'
import { mapGetters, mapActions } from 'vuex'
import cloneDeep from 'lodash.clonedeep'

export default {
  async asyncData({ store, route }) {
    if (store.getters['posts/posts'].find(p => p.id === route.params.id)) {
      return
    }
    await store.dispatch('posts/fetchPosts')
  },
  computed: {
    post() {
      return this.posts.find(p => p.id === this.$route.params.id)
    },
    isLiked() {
      if (!this.user) return false
      return this.post.likes.find(l => l.user_id === this.user.id)
    },
    ...mapGetters(['user', 'isLoggedIn']),
    ...mapGetters('posts', ['posts'])
  },
  methods: {
    like() {
      if (!this.isLoggedIn) {
        return
      }
      const likePayload = { user: this.user, post: this.post }
      this.addLikeToPost(cloneDeep(likePayload))
      this.addLikeLogToUser(cloneDeep(likePayload))
    },
    unlike() {
      if (!this.isLoggedIn) {
        return
      }
      const likePayload = { user: this.user, post: this.post }
      this.removeLikeToPost(cloneDeep(likePayload))
      this.removeLikeLogToUser(cloneDeep(likePayload))
    },
    ...mapActions(['addLikeLogToUser', 'removeLikeLogToUser']),
    ...mapActions('posts', ['addLikeToPost', 'removeLikeToPost'])
  },
  filters: {
    time(val) {
      return moment(val).format('YYYY/MM/DD HH:mm:ss')
    }
  }
}
</script>

試したこと

エラー文を見るにidプロパティが定義されていないというようなエラーと思いログイン機能やユーザー登録機能周りのコードを技術書のサンプルコードと比較してみたのですが問題は見当たりませんでした。

また、このエラーについて調べてみたところログイン画面でログインするときにFirebaseのデータベースにユーザーが存在しないときにこのエラーが発生するようなのですがログインする以前（ローカルでアプリを立ち上げた時点）で発生していて何が問題なのかもわからないという状況です。

このエラーの解消法がお分かりの方がいらっしゃいましたらアドバイスの方よろしくお願いいたします。

行動規範の内容に同意します

回答1件

Cannot read property 'id' of undefined"

これで、idがないのか、とお思いでしょうが、逆に
なんたら.id のなんたらのナカミが異常とかnullとかnoneの場合もそういうエラーが出ます。

そっちの方をチェックしてみては

投稿2020/12/11 04:12

y_waiwai

総合スコア87774

jime1234567

2020/12/11 05:40

ご回答いただきありがとうございます。つまりデータがおかしい（nullやnone）からこのエラーが出ているという認識で合っていますでしょうか。ぼくの認識が合っているとしたら現状まだなにもデータも入れていないのでuser.id,post.id辺りがnullだからエラーが出ているかと思います。その場合の対処としましては何らかの方法でデータを入れるということでよろしいのでしょうか？