NextJS组件无法访问children属性的问题排查与咨询

你的错误核心在于：普通React函数组件只接收单个props对象参数，你拆分出第二个参数来获取children的写法不成立——React不会给组件传递第二个参数，而且你第一个props的类型定义里没有包含children，所以TypeScript会报错。

另外你提到的layout.tsx的写法是Next.js App Router的专属约定，仅适用于框架提供的layout组件，不能直接套用到自定义组件上。

修正方案一：显式在props类型中包含children #

直接把children加入props的类型定义，从单个props对象中解构所有属性：

"use client"
import { useState, useEffect } from "react";

const Blinker2 = (props: { interval: number; delay: number; children: React.ReactNode }) => {
    const [active, setActive] = useState(false);
    const { children, interval, delay } = props;

    useEffect(() => {
        const toggleActive = () => setActive(!active);

        // 新增timeout的清理，避免组件卸载后触发
        const timeoutId = setTimeout(() => {
            const intervalId = setInterval(toggleActive, interval);
            return () => clearInterval(intervalId);
        }, delay);

        return () => clearTimeout(timeoutId);
    }, [active, delay, interval])

    return (
        <pre>{active ? children : " ".repeat(children?.toString().length ?? 0)}</pre>
    );
};

export default Blinker2;

修正方案二：使用React.FC类型（可选） #

React.FC类型会自动包含children属性，适合快速定义组件：

"use client"
import { useState, useEffect, FC } from "react";

const Blinker2: FC<{ interval: number; delay: number }> = ({ interval, delay, children }) => {
    const [active, setActive] = useState(false);

    useEffect(() => {
        const toggleActive = () => setActive(!active);

        const timeoutId = setTimeout(() => {
            const intervalId = setInterval(toggleActive, interval);
            return () => clearInterval(intervalId);
        }, delay);

        return () => clearTimeout(timeoutId);
    }, [active, delay, interval])

    return (
        <pre>{active ? children : " ".repeat(children?.toString().length ?? 0)}</pre>
    );
};

export default Blinker2;

额外优化点 #

• 给children?.toString().length加上空值合并运算符??，比三元表达式更简洁
• 新增了timeout的清理逻辑，避免组件卸载后定时器仍触发，造成内存泄漏

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