Vue3+TypeScript组件Props异常：无内容显示且报错求助

你遇到的两个错误都是因为Props的定义和使用方式不符合Vue3语法规范，具体问题和修正方案如下：

错误1：defineProps使用方式错误 #

你在defineComponent的setup函数里调用defineProps是错误的。defineProps是仅在<script setup>语法中使用的编译器宏，不能在选项式API的setup函数内部调用。在选项式API里，应该通过组件选项的props字段来定义属性。

错误2：TypeError: Cannot read properties of null (reading 'character') #

这个错误是因为你允许character为null，但模板中直接引用props.character，如果父组件未传入值或传入了null，就会触发空值读取错误（哪怕只是显示对象本身，初始渲染时也可能因为值为null导致问题），需要添加空值防护逻辑。

修正方案1：保持选项式API写法 #

<template>
<q-card class="my-card" flat bordered>
    <q-card-section horizontal>
      <q-img class="col-5" src="https://cdn.quasar.dev/img/parallax2.jpg" />
      <!-- 添加v-if做空值防护，避免null渲染报错 -->
      <q-card-section v-if="character"> 
        {{ character }}
        <!-- 若需访问具体属性，用可选链语法：{{ character?.name }} -->
      </q-card-section>
      <!-- 可选：添加空状态提示 -->
      <q-card-section v-else>暂无数据</q-card-section>
    </q-card-section>
  </q-card>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { Character } from './models';

export default defineComponent({
  name: 'CardComponent',
  // 选项式API中，Props定义在组件选项的props字段中
  props: {
    character: {
      type: Object as PropType<Character>,
      default: null, // 允许传入null时设置默认值
      // required: true // 若必须传入该属性，可打开此注释
    }
  },
  setup(props) {
    // setup函数的第一个参数就是Props对象，直接使用即可
    return {
      ...props, // 解构Props，模板中可直接用character而非props.character
      lorem: 'Lorem ipsum dolor sit amet, blah blah blah',
    };
  },
});
</script>
<style lang="sass" scoped>
.my-card
  width: 100%
  max-width: 350px
</style>

修正方案2：改用Vue3推荐的<script setup>语法（更简洁） #

这种写法可以直接合法使用defineProps，代码结构更简洁：

<template>
<q-card class="my-card" flat bordered>
    <q-card-section horizontal>
      <q-img class="col-5" src="https://cdn.quasar.dev/img/parallax2.jpg" />
      <q-card-section v-if="character"> 
        {{ character }}
        <!-- 访问属性用可选链：{{ character?.name }} -->
      </q-card-section>
      <q-card-section v-else>暂无数据</q-card-section>
    </q-card-section>
  </q-card>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
import { Character } from './models';

// 在<script setup>中直接使用defineProps定义Props
const props = defineProps({
  character: {
    type: Object as PropType<Character>,
    default: null
  }
});

// 解构Props，模板中直接使用character
const { character } = props;

const lorem = 'Lorem ipsum dolor sit amet, blah blah blah';
</script>
<style lang="sass" scoped>
.my-card
  width: 100%
  max-width: 350px
</style>

内容的提问来源于stack exchange，提问作者Otorrinolaringologista -man