yarn build时TypeScript报'Cannot find name(lang)'错误原因咨询

你写错了React组件props的类型注解语法，导致lang变量被错误重命名，所以代码里找不到它。

错误原因 #

你当前的解构写法：

const Header = ({ dict: map, lang: string }) => {

这里的lang: string是解构赋值的重命名语法，意思是把props中的lang属性重命名为string变量，而非给lang标注类型。这就导致组件内部你想用lang时，这个变量根本不存在，自然报错。

正确写法 #

有两种规范的写法可以解决：

写法1：直接给props对象标注类型

// 替换"你的字典类型"为dict实际对应的TypeScript类型
const Header = ({ dict: map, lang }: { dict: 你的字典类型, lang: string }) => {
  return (
    <header className="flex items-center justify-between py-10">
      <div>
        <Link href={`/${lang}`} aria-label={siteMetadata.headerTitle}>
          <div className="flex items-center justify-between">
          {/* ... 其余代码 */}
          </div>
        </Link>
      </div>
    </header>
  )
}

写法2：提前定义Props接口（更适合复杂组件）

// 先定义props的类型接口
interface HeaderProps {
  dict: 你的字典类型; // 替换为实际类型
  lang: string;
}

const Header = ({ dict: map, lang }: HeaderProps) => {
  return (
    <header className="flex items-center justify-between py-10">
      <div>
        <Link href={`/${lang}`} aria-label={siteMetadata.headerTitle}>
          <div className="flex items-center justify-between">
          {/* ... 其余代码 */}
          </div>
        </Link>
      </div>
    </header>
  )
}

核心是：类型注解要作用在整个props对象上，而非解构后的单个变量上。

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