从具有Object.keys的映射对象输出键/值时发生Typescript错误

Question

React应用程序在尝试映射错误对象并显示键值和键作为锚href时，出现以下Typescript错误。

Element implicitly has an 'any' type because expression of type '"errors"' can't be used to index type '{ paid?: string | undefined; }'.
  Property 'errors' does not exist on type '{ paid?: string | undefined; }'.ts(7053)

以下是组件

interface ErrorProps {
  errors: {
    paid?: string
  }
}
function Error(props: ErrorProps) {
  return (
    <ul>
      {props.errors && Object.keys(props.errors).map(key => {
        return (
          <li key={key}>
            <a href={`#${key}`}>
              {props.errors[key as keyof ErrorProps.errors]} // The error is on this line
            </a>
          </li> 
        )
      })}
    </ul>
  )
}

以下是传递给错误组件的Props：

errors: {paid: "Paid must be a number"}

我试图在生成的HTML中得到的内容如下：

<a href="#paid">Paid must be a number</a>

非常感谢。

Answer 1

ErrorProps.errors是类型，而不是命名空间。考虑更改检索嵌套类型的方式。

{props.errors[key as keyof ErrorProps['errors']]}