为什么 Vue 在使用 vue router 传递 props 时出现 Cannot read properties of undefined 的类型错误

问：

在使用 vue router 时，我试图为我的组件获取一个道具，但它一直给出错误“无法读取未定义的属性（读取'subjectName'）”控制台图像

我的路由器JS文件

const router =createRouter({
    history:createWebHistory(),
    routes:[
        {path:'/', component:indexPage }
       {path:'/subject/:subName', component:subjectPage, props:true},
       {path :"/login", component:thePage, 
    },
    {path :"/register", component:signUp,},
    ]
})

在这里，我使用 Provide 和 Injection 从父组件获取数据。

export default {
  props:['subName'],
  inject: ["subjects"],
  data() {
    return {
      subjectName: "",
      subjectImage: "",
    };
  },
  methods: {
    loadSubject(subName) {
      const pickedSubject = this.subjects.find((subject)=>subject.subjectName===subName);
      this.subjectName=pickedSubject.subjectName;
      this.subjectImage=pickedSubject.subjectImage;
    },
  },
  created() {
    this.loadSubject(this.subName);
  },
  watch: {
    subName(newSubject) {
      this.loadSubject(newSubject);
    },
  },
};

这是 SUBJECTPAGE VUE 文件

<template>
  <heroSection></heroSection>
  <courseOutline></courseOutline>
</template>
<script>
import heroSection from "./heroSection.vue";
import courseOutline from "./courseOutline.vue";
export default {
  data() {
    return {
      subjects: [
      {
          subjectName: "biology",
          subjectDescription: "some random text",
          subjectGoals: ["four", "five", "six"],
          subjectImage: "../../../IMAGES/sixteen.jpg",
        },
      ],
    };
  },
  components: {
    heroSection,
    courseOutline,
  },
  provide() {
    return {
      subjects: this.subjects,
    };
  },
};
</script>