为何useEffect出现height未使用TS错误？内部函数无法用外部变量？

嘿，我来帮你拆解这两个问题：

1. 先搞定TypeScript的6133错误 #

这个错误的原因非常明确：你在useEffect里声明了let height = contentDiv.current ? contentDiv.current.scrollHeight : 0;，但这个height变量完全没被使用过。

为什么会这样？因为你定义的test函数里的height是它自己的函数参数，和外部的height是两个独立的变量——相当于参数名“覆盖”了外部的变量名，导致外部的height成了“声明却没被读取”的状态，TypeScript就抛出了这个提示。

2. 关于“useEffect内部函数无法使用外部变量”的疑惑 #

其实useEffect内部的函数是可以正常访问外部变量的！你这里的问题只是「变量名遮蔽」导致的错觉：你在test函数里定义了同名的height参数，所以当你在函数里写height时，它指向的是参数里的那个，而不是外部计算好的height变量，看起来就像是用不了外部变量一样。

给你两个修正方案，看你需求选： #

方案1：让test函数直接使用外部计算的height（符合你原本的逻辑） #

如果你本来就是想把contentDiv的scrollHeight通过test函数传给setExpandedHeight，那完全不需要给test函数加参数，直接引用外部的height就行：

useEffect(() => {
  let height = contentDiv.current ? contentDiv.current.scrollHeight : 0;
  // 去掉函数参数，直接用外部的height
  let test = () => height;
  setExpandedHeight(test);
}, [children]);

这样外部的height被正常使用，TS错误会消失，test函数也能正确拿到你计算的scrollHeight值。

方案2：如果test函数是通用的（不需要依赖外部height） #

如果test函数是设计用来接收任意height值的工具函数，那你外部计算的height其实没用，可以直接删掉：

useEffect(() => {
  // 定义接收参数的通用test函数
  let test = (height: number) => height;
  setExpandedHeight(test);
}, [children]);

不过这种情况要注意，如果你原本的需求是把contentDiv的scrollHeight存起来，那方案1才是正确的选择。

最后提个小建议：写代码时尽量避免内层作用域和外层作用域用同名变量，能减少很多这类混淆问题~

内容的提问来源于stack exchange，提问作者Michael Rýdl