一覧ページから詳細ページへ飛ぶ時に、クリックした道場生の情報を持ったまま遷移させて表示させたい

Question

前提・実現したいこと

Nuxt.jsとFirebaseを使い道場生管理アプリを作っています。一覧ページから詳細ページへ飛ぶ時に、クリックした道場生の情報を持ったまま遷移させて表示させたいのですが、情報がうまく持ってこれず困っています。

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

エラーメッセージ

該当のソースコード

page/_id.vue

<template>
    <v-app>
        <v-main>
            <v-container>
                <v-row>
                    <v-col>
                        <v-card>
                            <v-card-title>
                                    <StudentDetail :firstName="student.firstName">
                                </StudentDetail>
                            </v-card-title>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>
        </v-main>
        <div class="itemContainer">
        </div>
        <div class="button">
            <nuxt-link to="/">戻る</nuxt-link>
        </div>
    </v-app>
</template>

<script>
    import axios from 'axios';
    import { db } from '~/plugins/firebase.js'
    import StudentDetail from '~/components/StudentDetail.vue'
    import { mapGetters } from 'vuex'

    export default {
        data() {
            return {
                firstName :''
            }
        },
        components: { StudentDetail },
        async asyncData({ store,params }) {
            db.collection('student').where(　).get().doc.data()
        },
        computed: {
        ...mapGetters({students: 'getStudents' })
        },
    }
</script>

components/StudentDetail.vue

<template>
    <div class="item">
        <div>名前: {{firstName}}</div>
    </div>
</template>

<script>
    export default {
        name: "StudentDetail",
        props: {
            firstName: String,
            required: true,
        }
    }
</script>

試したこと

whereの中にRouterからstudentのIDを受け取りたいのですが、それがうまくいきません。

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

ここにより詳細な情報を記載してください。

Answer 1

const studentId = this.$route.params.id

とすることで解決しました。