Next.js部署后选择框字符串对象键转为数字的修复咨询

问题描述 #

我在Next.js应用中为选择框定义了一个键值均为字符串的对象：

export const HOURS: { [key: string]: string } = {
  '00': '00',
  '01': '01',
  '02': '02',
  '03': '03',
  '04': '04',
  '05': '05',
  '06': '06',
  '07': '07',
  '08': '08',
  '09': '09',
  '10': '10',
  '11': '11',
  '12': '12',
  '13': '13',
  '14': '14',
  '15': '15',
  '16': '16',
  '17': '17',
  '18': '18',
  '19': '19',
  '20': '20',
  '21': '21',
  '22': '22',
  '23': '23',
} as const

本地调试时对象结构与定义一致，但打包部署后，对象的键被自动转为数字（比如'00'变成0，'01'变成1），导致选择框排序不符合预期，部署后的对象结构如下：

0: "00",
1: "01",
2: "02"
...

尝试过显式定义{ [key: string]: string }类型和使用as const都无效，请问如何保留声明时的字符串键？

解决方案 #

改用数组存储键值对 #

对象的数字类字符串键在JS引擎或打包工具优化时会被自动转为数字，这是JS的特性。改用数组存储键值对可以完全控制顺序和键的类型：

export const HOURS = [
  { value: '00', label: '00' },
  { value: '01', label: '01' },
  { value: '02', label: '02' },
  // ... 剩余小时项
  { value: '23', label: '23' },
] as const;

渲染选择框时直接遍历数组，既能保证顺序，又能保留字符串类型的value。

给字符串键添加非数字前缀 #

如果必须使用对象，可以给每个键添加一个非数字前缀，避免被转为数字类型：

export const HOURS: { [key: string]: string } = {
  'h00': '00',
  'h01': '01',
  // ... 剩余小时项
  'h23': '23',
} as const;

使用时再去掉前缀，比如通过Object.keys(HOURS).map(key => key.slice(1))获取原始的小时字符串。

禁用打包工具的对象键优化 #

Next.js默认使用Terser进行代码压缩，Terser会将可转为数字的字符串键优化为数字。可以在next.config.js中配置禁用该优化：

module.exports = {
  webpack: (config) => {
    config.optimization.minimizer.forEach(minimizer => {
      if (minimizer.constructor.name === 'TerserPlugin') {
        minimizer.options.terserOptions.compress = {
          ...minimizer.options.terserOptions.compress,
          properties: false, // 禁用对象键优化
        };
      }
    });
    return config;
  },
};

注意：禁用该优化可能会导致打包后的代码体积略有增加，需权衡使用。

内容的提问来源于stack exchange，提问作者curious.curie