NextJS useRouter locale TypeScript错误：'undefined'无法作为索引类型

遇到的错误提示：

Type 'undefined' cannot be used as an index type.

问题场景 #

使用Next.js的next/router中useRouter获取locale，用来访问多语言配置对象languageContent时触发错误，代码如下：

const { locale } = useRouter();
const { pageTitle } = languageContent[locale];

但硬编码locale值（比如"en-US"）时，错误就会消失：

const { locale } = useRouter();
const { pageTitle } = languageContent["en-US"];

多语言配置对象结构：

const languageContent = {
    "en-US": {
        pageTitle: "Title",
    },
    "fr-FR": {
        pageTitle: "Titre",
    },
    "iw": {
        pageTitle: "כותרת",
    },
};

export default languageContent;

原因分析 #

TypeScript的类型定义中，useRouter()返回的locale类型是string | undefined——尽管业务逻辑里默认会返回"en-US"，但TS并不知道这一点，所以它认为locale可能是undefined，而undefined不能作为对象的索引类型使用。

解决方案 #

方案1：非空断言 #

直接告诉TypeScriptlocale不会是undefined，使用!操作符：

const { locale } = useRouter();
const { pageTitle } = languageContent[locale!];

注意：只有你能100%保证locale永远不会为undefined时才用这个方法，否则运行时可能出现报错。

方案2：设置默认值 #

解构locale时直接给默认值，确保变量永远是合法的索引值：

const { locale = "en-US" } = useRouter();
const { pageTitle } = languageContent[locale];

这个方法更安全，即使locale真的是undefined，也会 fallback 到默认语言。

方案3：明确类型约束 #

定义合法的语言键类型，同时约束languageContent的类型，让TypeScript清楚哪些值是合法索引：

// 定义所有支持的语言键类型
type SupportedLocale = "en-US" | "fr-FR" | "iw";

// 约束languageContent的类型
const languageContent: Record<SupportedLocale, { pageTitle: string }> = {
    "en-US": { pageTitle: "Title" },
    "fr-FR": { pageTitle: "Titre" },
    "iw": { pageTitle: "כותרת" },
};

// 处理locale，通过类型断言确保类型匹配
const { locale } = useRouter();
const currentLocale = locale as SupportedLocale;
const { pageTitle } = languageContent[currentLocale];

这个方法最严谨，适合多语言场景后续扩展，能在编译期就拦截非法的语言键。

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