microsoft / microsoft/TypeScript

This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided

未关闭
#61,692 5 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Needs Investigation
主要语言
Go
星标
111k
派生
14.3k
平均合并
2 天 4 小时
30 天内合并 PR
132

描述

### 🔎 Search Terms

This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided. ts(2745)
ts2745

### 🕗 Version & Regression Information

- Reproducible in 5.0.3 - 5.8.3
- The error message was different in 4.9.5 and below: "Property 'children' is missing in type '{}' but required in type '{ children: string; }'"

### ⏯ Playground Link

https://www.typescriptlang.org/play/?target=99&isolatedModules=true&ts=5.8.3#code/MYewdgzgLgBASgUwIbFgXhgb2AJ2VBAUQBsEBbBMKAGhgDEckBzCqgXwCgOB6bmAFQAWASwgwAUgGUAGjCjMA5GIXARxACZ4wCmAAccIXTAQAPXQlRioAT3MwlUHMLBMdAdxGqYeAI4BXYTwxMj9iKGFdUhhVYQ0tWgAjP1hwYmsYJBgIZyYomI0YNyQxfRAAN2F1BHUAOigIAAoAJgB2ABYAVgBKDlBIEFIa4hAmBoAeSUccgGE1TUoAPkzoJxcx7knVplnY+bAFroBuDgAzPzBUYXAYTZm5rQbMaPvKGDYALixn3a1PlZy3l0sBwYN4EFA-DgwN84pRjpweHwAOogHAAazEJ2cCEKwigghAyRhe164AgAwQQxG4wAciAdrDodwDsczhdwtc6Qy9g0gZgQTBePRGCxKLA3KiMTAsWAEAK8BCoTAxksslM1sz4VwhQBJGDqcAKWBosAgNwwYQnOQiMSiMHEJAEdTvRESGTGUisWDCMiRYTAPFpGCCYpyWw4hRIMDWHQJCxIPwQHGmi1UBA4E4oCNSaQ1HVUVbZYAkchiiA6Uyiep1RotAAMTQAbD0+uTBsNRmN1MIyoKWdq+Dmw7oAXaEsVqtLQkHrogULAAIwATmHOQgiSJ2V9xEtwknUBAMDIzh9SGIYNK6j8AYSUVMSG3cqFhBM86D+JxEAfOPTBhwMBAYBgEhMQ3DxQR4GQVBVxcCBXQaQQoCgXQIHeXgmHAvwEhqUAyG4AARBAZTxBA0n4cN1AIoiTwIMiKO4W8QASbgyGKAgcG4GxzAgbg8HnbhnCqEwalqeoelMXRUVgKpgAdPAp3ZK5oVwfAiE9MUGgFJNiE+KNrGoAV1EdJAAH5dOjAzQQIEwoDMjJow4LpPhzGoSy9Y4OAkqT9QsOScVbWAGGYL1PgaUoUM+flQXyPY7JctyxXhIE0AWN1cwSqgPK8nBYDAb8IF0LM0uBUFstgLicQy9ABVBAAfNUthqmB6rAPwyDjHAmvqhJhAwqgupgHV2KQW8EDGKqFgGhIQApKMBta4hiAG84qhlapjlKsxvOcdjM2ASr1KoABBJCnCSAgIAABQMcwcvSTBOE2ySctTXaiqq7ktBOqZzpxJ4Yq0OyqsOR7jC2l6dvTPacXzdUi2+s7kgQMQHoFMrXqhorYcLf0qpR-Ue0ii11Ds-4XDeEGODYIA

### 💻 Code

```tsx
const React = {createElement, Fragment}

// This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided.ts(2745)
console.log(a string);
function StringChildren({ children }: { children: string }) {
return children;
}

// Works fine without children
console.log();
function NoChildren() {
// Fragment works fine
return <>a string;
}

// I don't know if this is related:
// JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)
console.log(

);

// JSX typing is based fully on React 19 typings, but simplified to minimal reproducible example
// Exactly the same error occurs with React typings
// (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts)
export declare function createElement(
sel: any,
data?: any,
text?: any
): JSX.Element;

export declare const Fragment: (props: {
children?: JSX.Element;
}) => JSX.Element;

export namespace JSX {
export type Element =
| string
| number
| bigint
| Iterable
| boolean
| null
| undefined;
export interface ElementAttributesProperty {}
export interface ElementChildrenAttribute { children?: Element;}
export interface IntrinsicAttributes {}
export interface IntrinsicElements { div: { id?: string };}
}
```

### 🙁 Actual behavior

Calling JSX component that accepts `string` children type emits the following error:
> This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided.ts(2745)

### 🙂 Expected behavior

No error should be emitted

### Additional information about the issue

**The exact same error is reproducible with official React 19 typings**. See tiny reproduction repository: https://github.com/maxpatiiuk/typescript-react-19-jsx-bug

---

Looking at https://github.com/microsoft/TypeScript/blob/main/src/compiler/checker.ts, the error is triggered by the following check:

```ts
// Line 21585:
else if (!isTypeRelatedTo(getIndexedAccessType(source, childrenNameType), childrenTargetType, relation)) {
// arity mismatch
result = true;
const diag = error(
containingElement.openingElement.tagName,
Diagnostics.This_JSX_tag_s_0_prop_expects_type_1_which_requires_multiple_children_but_only_a_single_child_was_provided,
childrenPropName,
typeToString(childrenTargetType),
);
if (errorOutputContainer && errorOutputContainer.skipLogging) {
(errorOutputContainer.errors || (errorOutputContainer.errors = [])).push(diag);
}
}
```

It appears that `getIndexedAccessType(source, childrenNameType)` tries to get the indexed type of `string`, which returns `unknown` type, which is not considered related to `string` type.

---

Potentially related to https://github.com/microsoft/TypeScript/issues/60572, however the suggested workaround in that issue is not working.

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

先在 Playground 或链接的仓库中完成最小复现,然后阅读 src/compiler/checker.ts 中 21585 行附近、围绕 getIndexedAccessType 检查的 JSX children 检查路径。使用提供的 StringChildren 示例和相关的 React 19 类型定义验证行为;完成的标准是有效的单个字符串 child 不再发出 ts(2745)。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
compilers
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。