TypeScript将null替换为空字符串时遇‘undefined不可赋值给string’错误

报错原因 #

• 你只遍历了顶层属性，要是user字段是null，直接赋值空字符串会违反接口定义——user要求是{fullName: string}类型，不能是字符串
• Object.keys()返回的是字符串数组，硬断言成keyof random不严谨，TypeScript没法保证每个键都严格匹配接口属性
• 类型冲突的核心是：你可能把对象类型的属性（比如user）改成了字符串类型，同时initialValues中可能存在undefined值，触发了类型检查

正确实现方案 #

写一个递归处理函数，区分属性类型进行操作：字符串类型的null替换为空字符串，对象类型则递归处理内部属性，确保类型匹配：

// 接口名改为大驼峰，符合TypeScript命名规范
export interface Random {
  id: string;
  name: string;
  user: {
    fullName: string;
  };
}

function replaceNullWithEmptyString<T>(obj: T): T {
  // 处理null值：针对字符串类型的null返回空字符串
  if (obj === null) {
    return '' as unknown as T;
  }
  // 递归处理嵌套对象
  if (typeof obj === 'object' && obj !== null) {
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        obj[key] = replaceNullWithEmptyString(obj[key]);
      }
    }
  }
  return obj;
}

// 在useEffect中调用处理函数
useEffect(() => {
  const processedValues = replaceNullWithEmptyString(initialValues);
  // 如需更新Formik的值，使用setValues方法
  // setValues(processedValues);
}, [initialValues]);

补充说明 #

• 如果initialValues中可能存在undefined值，可在函数中添加对应处理逻辑：

if (obj === null || obj === undefined) {
  return '' as unknown as T;
}

• 不要直接修改Formik的initialValues，处理完成后通过setValues更新或者作为初始值传入

内容的提问来源于stack exchange，提问作者hj.paul7