React+TypeScript项目中NavLink的isActive prop触发TS7031错误求助

这个错误的核心原因是TypeScript的严格类型检查规则：你给navLink函数的参数isActive没有定义明确类型，TS默认将其推断为any，但生产构建时的严格模式不允许这种隐式any类型，因此导致构建失败（开发环境通常仅显示警告，不影响功能运行）。

下面提供两种简单直接的解决方式：

方式一：直接给参数定义布尔类型 #

这是最适合新手的直白写法，明确指定isActive为布尔值：

const navLink = ({ isActive }: { isActive: boolean }) => { 
  return { 
    color: isActive ? "#34C200" : "", 
    fontSize: isActive ? "16px" : "", 
    borderBottom: isActive ? "solid" : "none", 
    paddingBottom: isActive ? "3px" : "", 
    outline: isActive ? "none" : "none", 
  }; 
};

方式二：使用React Router内置类型（更规范） #

如果你使用的是react-router-dom，可以直接用它提供的类型来匹配NavLink的style函数参数：
首先导入相关类型：

import { NavLink, NavLinkProps } from 'react-router-dom';

然后定义函数参数类型：

const navLink = ({ isActive }: Parameters<NonNullable<NavLinkProps['style']>>[0]) => {
  return { 
    color: isActive ? "#34C200" : "", 
    fontSize: isActive ? "16px" : "", 
    borderBottom: isActive ? "solid" : "none", 
    paddingBottom: isActive ? "3px" : "", 
    outline: isActive ? "none" : "none", 
  }; 
};

修改后的完整代码示例 #

import { NavLink } from 'react-router-dom';

const Header = () => { 
  
  const navLink = ({ isActive }: { isActive: boolean }) => { 
    return { 
      color: isActive ? "#34C200" : "", 
      fontSize: isActive ? "16px" : "", 
      borderBottom: isActive ? "solid" : "none", 
      paddingBottom: isActive ? "3px" : "", 
      outline: isActive ? "none" : "none", 
    }; 
  }; 

  return ( 
    <header className="shadow-md sticky z-30 top-0 bg-white px-5 sm:px-10"> 
      <nav className="container flex items-center py-4"> 
        <div className="flex flex-row sm:flex-col pl-0 sm:w-1/6 sm:mx-auto sm:justify-center"> 
          <img 
            className="w-1/4 sm:w-2/4 sm:block sm:mx-auto" 
            src="images/logos/atasp1.png" 
            alt="ATASP-1 Logo" 
          /> 
          <div className="flex justify-center items-center"> 
            <span className="bg-atasp-mid-red rounded-md sm:rounded-lg text-white italic text-center text-xs sm:text-md p-1 sm:px-4"> 
              KEBBI - SOKOTO ZONE 
            </span> 
          </div> 
        </div> 
        <ul 
          className={`hidden sm:flex flex-1 justify-end items-center gap-3 lg:gap-6`} 
        > 
          <li className="cursor-pointer"> 
            <NavLink to="/" style={navLink}> 
              ATASP-1 
            </NavLink> 
          </li> 
          <li className="cursor-pointer"> 
            <NavLink to="infra" style={navLink}> 
              Infrastructure 
            </NavLink> 
          </li> 
          <li className="cursor-pointer"> 
            <NavLink to="outreach" style={navLink}> 
              Outreach 
            </NavLink> 
          </li> 
        </ul> 
      </nav> 
    </header> 
  ); 
}; 

export default Header; 

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