将React JavaScript导航栏转为TypeScript时的Context错误解决

AI 小北

2026-8-20

问题修复方案

错误根源

报错是因为你定义的状态类型和传入setPage的对象结构完全不匹配：

你声明的状态中links字段类型为{ page: string; links: any[]; }
但实际传入的links是包含label、icon、url的对象数组，两者结构完全不一致

具体修复步骤

1. 定义准确的类型接口

先替换掉any，明确导航链接和页面状态的类型：

// 单个导航链接的类型
interface NavLink {
  label: string;
  icon: string; // 若icon是React组件，可改为React.ReactNode
  url: string;
}

// 页面状态的整体类型
interface PageState {
  page: string;
  links: NavLink[];
}

2. 修正useState的类型声明

初始化状态时，用上文定义的PageState约束类型：

const [currentPage, setCurrentPage] = useState<PageState>({
  page: 'Home',
  links: [
    { label: 'Home', icon: '🏠', url: '/' },
    // 其他初始导航链接...
  ]
});

3. 修正setPage的调用逻辑

在第70行调用状态更新函数时，确保传入的对象严格符合PageState结构：

// 示例：构造符合类型的页面状态对象
const targetPage: PageState = {
  page: 'Billing',
  links: [
    { label: 'Overview', icon: '📊', url: '/billing/overview' },
    { label: 'Payment Methods', icon: '💳', url: '/billing/payment' }
  ]
};

setCurrentPage(targetPage);