如何修复Next.js Link元素的‘Property 'click' does not exist on type 'never'’错误？

问题原因 #

1. useRef(null)未指定泛型类型，TypeScript无法推断ref指向的元素类型，默认推断为never。
2. 把React元素（<Link>）存在state里是不推荐的做法，易引发类型问题和不必要的渲染。
3. Next.js的<Link>组件本身不直接暴露click方法，需操作其内部的<a>标签或直接使用路由API。

方案一：使用Next.js路由API直接跳转（推荐） #

直接通过useRouter跳转，无需依赖DOM元素的click事件，代码更简洁且符合Next.js最佳实践：

// imports
import { useState } from "react";
import { useRouter } from "next/router";

const Test = () => {
  const [searchString, setSearchString] = useState("");
  const router = useRouter();

  const inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchString(event.target.value.toLowerCase().trim());
  };

  const searchSubmitHandler = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (searchString) {
      router.push(`./search/${searchString}`);
    }
  };

  return (
    <form onSubmit={searchSubmitHandler}>
      <input type="text" value={searchString} onChange={inputChangeHandler} />
      <button type="submit">搜索</button>
      {/* 若需展示可点击的链接，仍可保留Link */}
      {/* <Link href={`./search/${searchString}`}>跳转到搜索页</Link> */}
    </form>
  );
};

export default Test;

方案二：修复Ref类型并操作内部<a>标签 #

如果必须通过触发Link的点击事件实现，需指定ref类型并将ref绑定到Link内部的<a>标签：

// imports
import Link from "next/link";
import { useRef, useState } from "react";

const Test = () => {
  const [searchString, setSearchString] = useState("");
  // 指定ref类型为HTMLAnchorElement，明确指向a标签
  const searchLinkRef = useRef<HTMLAnchorElement>(null);

  const inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchString(event.target.value.toLowerCase().trim());
  };

  const searchSubmitHandler = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (searchLinkRef.current) {
      searchLinkRef.current.click();
    }
  };

  return (
    <form onSubmit={searchSubmitHandler}>
      <input type="text" value={searchString} onChange={inputChangeHandler} />
      <button type="submit">搜索</button>
      {/* 将ref绑定到Link内部的a标签 */}
      <Link href={`./search/${searchString}`}>
        <a ref={searchLinkRef} style={{ display: "none" }}></a>
      </Link>
    </form>
  );
};

export default Test;

关键修复点 #

• 给useRef添加泛型参数，明确其指向的DOM元素类型（如HTMLAnchorElement），解决TypeScript类型推断问题。
• 避免将React元素存储在state中，改为存储状态数据（如searchString），渲染时动态生成组件。

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