Next.js + TypeScript动态路由运行时错误技术求助

API 探路者

2026-6-23

Next.js + TypeScript 运行时错误排查（AboutPage组件接收para属性场景）

常见原因及解决方案

1. para属性未正确传递或为undefined

检查父组件传递para属性时是否存在遗漏，比如路由参数获取失败、异步数据未加载完成就渲染组件。
组件内添加兜底处理：

interface ParaProps {
  aboutId: string;
}

interface AboutPageProps {
  para?: ParaProps; // 标记为可选，避免未传递时报错
}

export default function AboutPage({ para }: AboutPageProps) {
  // 兜底处理，防止para为undefined
  const safePara = para || { aboutId: '' };
  
  return <div>About ID: {safePara.aboutId}</div>;
}

2. TypeScript类型定义不匹配

确认para的类型定义是否正确，避免类型断言错误或属性不存在。
如果是从路由获取aboutId，比如App Router的params，要确保类型对齐：

// app/about/[aboutId]/page.tsx
interface Params {
  aboutId: string;
}

export default function AboutPage({ params }: { params: Params }) {
  // 直接使用params.aboutId，无需额外封装para（如果是这种场景）
  return <div>About ID: {params.aboutId}</div>;
}

3. 异步数据加载问题

如果para是从异步请求获取的数据，确保数据返回后再渲染组件，避免在数据未就绪时访问aboutId：

'use client';

import { useEffect, useState } from 'react';

interface ParaProps {
  aboutId: string;
}

export default function AboutPage() {
  const [para, setPara] = useState<ParaProps | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/about');
      const data = await res.json();
      setPara(data);
    };
    fetchData();
  }, []);

  // 数据未加载时显示加载状态
  if (!para) return <div>Loading...</div>;

  return <div>About ID: {para.aboutId}</div>;
}