React 18+TypeScript中用forwardRef调用子组件方法的问题

开发基于React 18 + TypeScript的项目，Header组件包含一个用React-Bootstrap NavBar实现的Nav子组件。需要从Header调用Nav内部的导航栏切换方法，但使用forwardRef时出现错误。

Nav组件内的切换方法：

const toggleNav = () => {
  const toggle: HTMLButtonElement | null = document.querySelector(
    "button#toggle-button"
  );
  const collapseTell = document.querySelector("div#basic-navbar-nav");
  const showing = collapseTell
    ? collapseTell.className.indexOf("show") !== -1
    : false;
  if (toggle && showing) toggle.click();
};

父组件Header核心代码：

interface headerProps {
  prop1: ...
  prop2: ...
  prop3: ...
}

export function Header({
  prop1, prop2, prop3, ...
}: headerProps) {
  const navRef = useRef();

  return (
    <header>
      {/* 其他JSX内容 */}
      <Nav
        navProp1={}
        navProp2={}
        ref={navRef}
      />
    </header>
  );
}

Nav组件核心代码：

interface headerNavProps {
  navProp1: ...
  navProp2: ...
}

export const Nav = forwardRef(
  ({navProp1, navProp2, etc}: headerNavProps, ref) => {
    const toggleNav = () => {
      const toggle: HTMLButtonElement | null = document.querySelector(
        "button#toggle-button"
      );
      const collapseTell = document.querySelector("div#basic-navbar-nav");
      const showing = collapseTell
        ? collapseTell.className.indexOf("show") !== -1
        : false;
      if (toggle && showing) toggle.click();
    };

    return (
      <Navbar
        expand={...}
        collapseOnSelect={true}
        bg="transparent"
        variant="dark"
      >
        <Container>
          {/* Navbar内容 */}
        </Container>
      </Navbar>
    );
  }
);

遇到的错误：

Component is not a function. (In 'Component(props, secondArg)', 'Component' is an instance of Object)
renderWithHooks@http://localhost:3000/static/js/bundle.js:46501:31
mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:49787:32
...(后续栈追踪)

补充：不使用forwardRef时，给Nav加ref:any属性页面可渲染，但控制台出现警告：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

疑问：

1. forwardRef的使用哪里出错了？
2. 如何通过forwardRef获取子组件的toggleNav方法而非DOM节点？能否通过navRef.current.toggleNav()调用？
3. 是否必须使用forwardRef？直接用useRef绑定Nav时的编译警告怎么解决？

1. forwardRef的错误原因 #

当前实现存在三个核心问题：

• 未暴露方法到ref：forwardRef仅作为ref传递容器，但你没有把toggleNav挂载到ref上，父组件无法通过ref访问该方法。
• TypeScript类型缺失：未定义ref的类型，导致React无法正确识别组件的ref类型，引发运行时错误。
• DOM查询不符合React规范：用原生DOM查询操作元素，容易引发不可预期的状态不一致问题。

2. 正确通过forwardRef暴露toggleNav方法 #

结合useImperativeHandle钩子将子组件方法暴露给父组件，同时完善TypeScript类型定义，优化切换逻辑：

步骤1：定义Nav组件的Ref类型 #

在Nav组件文件中添加ref接口：

// 定义Nav组件暴露给父组件的方法接口
interface NavRef {
  toggleNav: () => void;
}

步骤2：用useImperativeHandle暴露方法 #

修改Nav组件，用React状态管理导航栏状态，替代DOM查询：

import { forwardRef, useImperativeHandle, useState } from 'react';
import { Navbar, Container, NavbarToggle, NavbarCollapse } from 'react-bootstrap';

interface headerNavProps {
  navProp1: ...;
  navProp2: ...;
}

interface NavRef {
  toggleNav: () => void;
}

export const Nav = forwardRef<NavRef, headerNavProps>(
  ({ navProp1, navProp2 }: headerNavProps, ref) => {
    const [isExpanded, setIsExpanded] = useState(false);

    const toggleNav = () => {
      if (isExpanded) setIsExpanded(false);
    };

    // 将toggleNav方法绑定到ref，暴露给父组件
    useImperativeHandle(ref, () => ({
      toggleNav,
    }));

    return (
      <Navbar
        expand="lg"
        collapseOnSelect={true}
        bg="transparent"
        variant="dark"
        expanded={isExpanded}
        onToggle={() => setIsExpanded(!isExpanded)}
      >
        <Container>
          <Navbar.Brand href="#home">Brand</Navbar.Brand>
          <NavbarToggle id="toggle-button" aria-controls="basic-navbar-nav" />
          <NavbarCollapse id="basic-navbar-nav">
            {/* 导航链接内容 */}
          </NavbarCollapse>
        </Container>
      </Navbar>
    );
  }
);

步骤3：父组件中调用子组件方法 #

修改Header组件，指定ref类型并调用方法：

import { useRef } from 'react';
import { Nav } from './Nav';
import type { NavRef } from './Nav';

interface headerProps {
  prop1: ...;
  prop2: ...;
  prop3: ...;
}

export function Header({ prop1, prop2, prop3 }: headerProps) {
  const navRef = useRef<NavRef>(null);

  const handleCollapseNav = () => {
    // 可选链避免null报错
    navRef.current?.toggleNav();
  };

  return (
    <header>
      <button onClick={handleCollapseNav}>折叠导航栏</button>
      
      {/* 其他JSX内容 */}
      <Nav
        navProp1={prop1}
        navProp2={prop2}
        ref={navRef}
      />
    </header>
  );
}

此时你可以通过navRef.current?.toggleNav()调用子组件的切换方法。

3. 是否必须使用forwardRef？ #

是的，函数组件必须使用forwardRef才能接收并传递ref。

函数组件本身没有实例，直接给函数组件加ref会触发警告，因为React无法将ref绑定到函数组件上。forwardRef的作用就是让函数组件能够接收父组件传递的ref，并将其绑定到内部DOM元素或通过useImperativeHandle暴露自定义方法。

替代方案：状态提升（更推荐） #

如果不想用forwardRef，可以将导航栏的状态管理逻辑提升到父组件，通过props传递状态和回调，更符合React单向数据流理念：

// Header组件
import { useState } from 'react';
import { Nav } from './Nav';

interface headerProps {
  prop1: ...;
  prop2: ...;
  prop3: ...;
}

export function Header({ prop1, prop2, prop3 }: headerProps) {
  const [isNavExpanded, setIsNavExpanded] = useState(false);

  const handleCollapseNav = () => {
    setIsNavExpanded(false);
  };

  return (
    <header>
      <button onClick={handleCollapseNav}>折叠导航栏</button>
      <Nav
        navProp1={prop1}
        navProp2={prop2}
        isExpanded={isNavExpanded}
        setIsExpanded={setIsNavExpanded}
      />
    </header>
  );
}

// Nav组件
interface headerNavProps {
  navProp1: ...;
  navProp2: ...;
  isExpanded: boolean;
  setIsExpanded: (value: boolean) => void;
}

export const Nav = ({ navProp1, navProp2, isExpanded, setIsExpanded }: headerNavProps) => {
  return (
    <Navbar
      expand="lg"
      collapseOnSelect={true}
      bg="transparent"
      variant="dark"
      expanded={isExpanded}
      onToggle={() => setIsExpanded(!isExpanded)}
    >
      <Container>
        {/* Navbar内容 */}
      </Container>
    </Navbar>
  );
};

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