TypeScript无URL跳转时返回上一组件的类型定义问题

核心结论 #

• TypeScript 没有「直接指向另一个组件」的类型语法，这类纯父组件内部控制显隐的页面切换场景，完全不需要将回调类型和目标组件做绑定。
• 你遇到的场景里，back属性的类型直接定义为() => void即可，这也是这类无参回调最通用的正确写法。

代码示例 #

子组件Props定义 #

// UserForm.tsx
interface UserFormProps {
  // 无入参、调用方不关心返回值的回调
  back: () => void
}

const UserForm = ({ back }: UserFormProps) => {
  // 触发返回逻辑时直接调用即可，不需要传参、不需要处理返回值
  return <button onClick={back}>返回</button>
}

父组件对应实现 #

// UserPage.tsx
import { useState } from 'react'
import UserForm from './UserForm'
import UserList from './UserList'

const UserPage = () => {
  // 用内部状态控制页面显隐，完全不修改URL
  const [showForm, setShowForm] = useState(false)

  // 切换回列表的回调方法，无返回值
  const backMethod = () => {
    setShowForm(false)
  }

  return showForm ? <UserForm back={backMethod} /> : <UserList />
}

类型说明 #

• () => void的含义是「子组件调用这个方法时，不需要传入任何参数，也不会使用方法的返回值」，完全匹配你的场景需求。
• 不需要担心父组件的backMethod如果有临时返回值会报类型错误：TS中允许有返回值的函数赋值给返回值为void类型的函数类型，这个类型约束只会限制子组件不要去读取返回值，不会限制父组件方法的内部实现。
• 如果你的返回逻辑包含异步操作（比如提交表单成功后再返回），只需要把类型调整为() => Promise<void>即可，核心逻辑不变。
• 不要为了省事写any，会彻底丢失TS的类型校验能力。

设计逻辑说明 #

这种写法完全符合React单向数据流的设计原则：子组件只负责在合适的时机触发传入的回调，不需要知道回调内部具体做了什么、是切换显隐还是跳转路由、最终会渲染哪个组件，所有页面切换的逻辑都封装在父组件内部即可，耦合度更低。

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