Vue+TypeScript中使用括号与replace函数的语法报错问题

你遇到的never类型报错，核心原因是TypeScript无法正确推断page变量的类型，导致点语法和括号语法的访问都出现类型校验问题。以下是具体的解决步骤：

1. 定义WordPress页面数据的接口类型 #

先明确WordPress REST API返回的页面数据结构，给TypeScript提供类型依据：

interface WordPressPage {
  id: number;
  title: {
    rendered: string;
  };
  excerpt: {
    rendered: string;
  };
  // 按需添加你需要的其他字段，比如content、date等
}

2. 给page变量指定类型并正确初始化 #

在Vue组件中，不要直接将page初始化为null或空对象，要明确标注类型：

<script setup lang="ts">
import { ref } from 'vue';

// 用ref声明变量，指定类型为WordPressPage或null
const page = ref<WordPressPage | null>(null);

// 请求WordPress接口数据的示例
async function fetchPage() {
  const res = await fetch('你的WordPress页面接口地址');
  const data = await res.json();
  page.value = data;
}

fetchPage();
</script>

3. 用可选链处理空值，确保类型安全 #

不管用点语法还是括号语法，都要通过?.可选链处理可能的空值，让TypeScript正确识别类型：

<template>
  <div v-if="page">
    <!-- 点语法正常使用 -->
    <h1>{{ page.title.rendered }}</h1>
    <!-- 处理excerpt的HTML标签，用可选链避免空值调用报错 -->
    <div>{{ page.excerpt?.rendered.replace(/<[^>]+>/g, '') }}</div>
    
    <!-- 括号语法同样可用 -->
    <h1>{{ page['title']['rendered'] }}</h1>
    <div>{{ page['excerpt']?.['rendered'].replace(/<[^>]+>/g, '') }}</div>
  </div>
</template>

问题根源说明 #

你之前page['title']['rendered']能运行，大概率是模板里的v-if帮TypeScript暂时放宽了类型检查，但excerpt因为接口返回可能存在缺失、或初始化时类型处理不当，导致被推断成never类型。而错误的引号包裹写法（比如把replace也用引号括起来）只是把函数当成了字符串，自然不会触发TS报错，但页面也不会渲染内容。

额外提示 #

如果WordPress接口返回的excerpt字段可能不存在，要在接口定义里把它设为可选属性：excerpt?: { rendered: string };

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