Vue3 $route监听报Cannot read properties of undefined修复

问题背景 #

学习VueJS课程时，即使直接复制课程提供的源码，依然会出现课程演示中不存在的异常：

• 初始状态下应用运行正常：点击导航栏的teams选项，可正常展示所有可用团队的基础信息，以及查看每个团队成员的入口
• 点击Team2本应跳转至Team2的详情页面，添加$route监听器后导航功能失效，控制台抛出Cannot read properties of undefined错误，运行环境为Vue3

异常代码 #

添加路由监听器后触发报错的组件完整代码如下：

<template>
<section>
    <h2>{{ teamName }}</h2>
    <ul>
        <user-item
                v-for="member in members"
                :key="member.id"
                :name="member.fullName"
                :role="member.role"
        ></user-item>
    </ul>
</section>
<router-link to="/teams/t2">Team 2</router-link>
</template>

<script>
import UserItem from '../users/UserItem.vue';

export default {
    components: {
        UserItem
    },
    inject: ['users', 'teams'],
    data() {
        return {
            teamName: '',
            members: []
        };
    },
    methods: {
        loadMembersData(route) {
            const teamId = route.params.teamId;
            const selectedTeam = this.teams.find((team) => team.id === teamId);
            const foundMembers = selectedTeam.members;
            const selectedMembers = [];

            for (const member of foundMembers) {
                const selectedUser = this.users.find((user) => user.id === member);
                selectedMembers.push(selectedUser);
            }

            this.members = selectedMembers;
            this.teamName = selectedTeam.name;
        }
    },
    created() {
        this.loadMembersData(this.$route);
    },
    watch: {
        $route(newRoute) {
            this.loadMembersData(newRoute);
        }
    }
};
</script>

<style scoped>
section {
    margin: 2rem auto;
    max-width: 40rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    padding: 1rem;
    border-radius: 12px;
}

h2 {
    margin: 0.5rem 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
</style>

问题根因 #

添加$route监听器后，所有路由变化都会触发loadMembersData方法执行，当路由参数中不存在匹配的teamId时，this.teams.find()会返回undefined，此时直接读取selectedTeam.members属性就会触发空值读取错误。

修复方法 #

在loadMembersData方法中增加selectedTeam非空判断，只有成功匹配到对应团队数据时，才执行后续成员信息加载逻辑，修复后的方法代码如下：

methods: {
    loadMembersData(route) {
        const teamId = route.params.teamId;
        const selectedTeam = this.teams.find((team) => team.id === teamId);
        if (selectedTeam) {
            const foundMembers = selectedTeam.members;
            const selectedMembers = [];

            for (const member of foundMembers) {
                const selectedUser = this.users.find((user) => user.id === member);
                selectedMembers.push(selectedUser);
            }

            this.members = selectedMembers;
            this.teamName = selectedTeam.name;
        }
    }
},

内容的提问来源于stack exchange，提问作者Sead Silajdzic