[TreeView] Fix hydration error (#15002)

Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: Lukas Tyla <[email protected]>

packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts

@@ -8,11 +8,9 @@ export const useTreeViewId: TreeViewPlugin<UseTreeViewIdSignature> = ({
   state,
   setState,
 }) => {
-  const treeId = state.id.treeId;
-
   React.useEffect(() => {
     setState((prevState) => {
-      if (prevState.id.treeId === params.id) {
+      if (prevState.id.treeId === params.id && prevState.id.treeId !== undefined) {
         return prevState;
       }
 
@@ -23,6 +21,8 @@ export const useTreeViewId: TreeViewPlugin<UseTreeViewIdSignature> = ({
     });
   }, [setState, params.id]);
 
+  const treeId = params.id ?? state.id.treeId;
+
   return {
     getRootProps: () => ({
       id: treeId,
@@ -37,4 +37,4 @@ useTreeViewId.params = {
   id: true,
 };
 
-useTreeViewId.getInitialState = ({ id }) => ({ id: { treeId: id ?? createTreeViewDefaultId() } });
+useTreeViewId.getInitialState = ({ id }) => ({ id: { treeId: id ?? undefined } });

packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts

@@ -12,7 +12,7 @@ export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
 
 export interface UseTreeViewIdState {
   id: {
-    treeId: string;
+    treeId: string | undefined;
   };
 }