NextJS/TypeScript中如何将变量传入href属性？

你当前代码的问题在于用单引号包裹字符串时，'/patients/{member.id}' 里的 {member.id} 会被当作普通文本，不会解析为变量值。以下是两种可行的解决方案：

方案一：使用 ES 模板字符串 #

用反引号（`）替换单引号，通过 ${变量名} 嵌入动态值，这是最直观的写法：

<Tr key={member.id}>
  <Td>
    <HStack spacing="3">
      <Box>
        <Link as={NextLink} href={`/patients/${member.id}`} fontWeight="medium">
          {member.first_name} {member.last_name}
        </Link>
      </Box>
    </HStack>
  </Td>
</Tr>

方案二：使用 Next.js 路由对象（推荐复杂场景） #

如果你的项目基于 Pages Router，Next.js 支持通过对象格式定义 href，这种方式更利于路由预取和维护，尤其适合带多个查询参数的场景：

<Tr key={member.id}>
  <Td>
    <HStack spacing="3">
      <Box>
        <Link 
          as={NextLink} 
          href={{ 
            pathname: '/patients/[id]',  // 对应 pages/patients/[id].tsx 文件
            query: { id: member.id } 
          }} 
          fontWeight="medium"
        >
          {member.first_name} {member.last_name}
        </Link>
      </Box>
    </HStack>
  </Td>
</Tr>

若是 App Router（Next.js 13+），直接用模板字符串即可，无需额外配置 as={NextLink}：

<Tr key={member.id}>
  <Td>
    <HStack spacing="3">
      <Box>
        <Link href={`/patients/${member.id}`} fontWeight="medium">
          {member.first_name} {member.last_name}
        </Link>
      </Box>
    </HStack>
  </Td>
</Tr>

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